CSS Candy

Examples

CSS Loading Spinner

Styling a Loading Spinner

CSS loading spinner uses @keyframes for spinning animations.

Introduction to CSS Loading Spinners

Loading spinners are essential UI components that indicate to users that content is loading or a process is in progress. In CSS, spinners can be created using the @keyframes rule to animate elements in a circular, rotating motion.

Creating a Simple CSS Spinner

To create a basic spinner, we need to use the @keyframes rule to define the rotation animation. Let's start with a simple example:

In this example, a spinner class is created with a circular shape using border-radius: 50%. The border property is used to create a visible spinning effect by changing the color of one segment. The animation property applies the spin keyframe, which rotates the element from 0 to 360 degrees.

Customizing Spinner Speed and Color

We can easily adjust the speed and color of our spinner by modifying the animation duration and the border-top-color property:

Advanced Spinner with Multiple Colors

For a more advanced effect, you can use multiple colors in your spinner by altering the border colors:

This configuration uses transparent borders for all sides except for a different color on each, creating a dynamic and colorful spinning animation. Adjust the animation duration to control the speed of the rotation.

Responsive Spinners for Different Screen Sizes

To ensure your spinner adapts to various screen sizes, consider using media queries or relative units like percentages:

In this example, the spinner's size is set relative to its container, making it adaptable to different device sizes. The media query further adjusts the spinner's size when the screen width is below 600px.

Examples

Next
Responsive Table