What is a loading animation?
A loading animation is a kind of animation that indicates to users that the website or application is handling their request in their background. A loading animation reassures users that their request has been accepted and is being processed.
Loading animations may display when data is being fetched or processed, or when page content is being loaded. The animation displays until the loading process is complete.
Loading animations can take different forms, like progress bars, spinning or pulsing icons, or skeleton screens that act as visual placeholders for page content.
How to Make a Spinning Loading Animation with CSS
Let’s start with this spinner, which is actually pretty straightforward to make:
Here’s what each of these CSS properties does:
- The margin property is set to “auto” to center the loader on the page.
- The border property defines the size, style, and color of the loader’s border, which appears as the circular track that the orange ribbon moves around.
- The border-radius property set to 50% makes the loader into a circle.
- The border-top property defines the size, style, and color of the moving orange ribbon. It has the same size and style as the border — only the color is different.
- The width and height properties define the size of the loading animation (the entire circle).
- The animation property defines the name, duration, timing, and iteration account. In this example, the spinner is set to move at the same speed from start to end for 4 seconds and loop indefinitely.
Then, we have the animation’s keyframes, which describe how the loader should render at a given time during the animation sequence. Make sure to use the animation name defined in the animation property (in this case, “spinner.”)
Only two keyframes are defined in this example. The first occurs at 0%, or the start of the animation sequence, when the loader is configured to be rotated 0 degrees. The second keyframe occurs at 100%, the end of the animation sequence, when the loader is rotated 360 degrees. Therefore, the ribbon completes a full rotation over the course of four seconds.
We can also define border-bottom to add a second spinning ribbon:
The loaders can have more than 2 colors.