CSS Spinners

For this demo, I'm showing how to create CSS based loading spinners. This demo is from the CSS Tricks website article by Temani Afif, posted on July 1, 2022.

What it does

This code can create a variety of different loading spinners using CSS. In addition to these spinners, Temani has also created demos of loading dots, loading bars, and 3D loading elements. Additionally, he has this page on his own website with even more loading options.

Why use this?

These loading options are fun ways to build out custom loading animations without having to create an actual animated gif, or something similar. Because they are made from CSS, they can be easily updated for size, speed, or color to work with any site you may be creating.

The Demo

For this demo, I'll be showing how to create a circular spinner of dots using gradients to change the color and transform to create an animated effect.

Creating the Dots

To create the spinner, each dot is made up of a radial gradient. These dots are then repeated. The closet-side value along with the % that follow tell the code where to place the circle. The next values (starting with currentColor) determine the color of the different stops in the gradient. The final values determine the placement and where to repeat the circle on the x or y axis.

background:
    radial-gradient(closest-side at 50% 12.5%,currentColor 90%,#0000 98%) 
    50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,currentColor 90%,#0000 98%) 
    0 50%/80% 20% repeat-x;
    width: 150px;
    aspect-ratio: 1 / 1;

Creating the Gradient

Then a conic gradient is added to give each dot varying shades of the chosen color. Essentially, a conic gradient is created that only shows for the circles made above. This conic gradient creates the illusion of it fading. Here is the conic gradiennt used in a square to show how it applies to all of the circles in the loader. The 15deg value specifies the angle where the gradient starts/ends.

width: 200px;
aspect-ratio: 1;
background: #627864;
-webkit-mask: conic-gradient(from 15deg, #0003,#000);

When this is applied to the circles, this style is created. You can see how the colors of the square above mask to the circles below.

-webkit-mask: conic-gradient(from 15deg, #0003,#000);

Animating the Circles

Next, animation is added to make the circles move. The animation property creates an animated effect combined with the conic gradient mask. The key to the speed is the number of steps(). Less steps creates a slower spinner, more steps creates a faster spinner.

animation: load 1s steps(12) infinite;

And finally, the code is added to create all of the circles. The transform: rotate() property rotates to create multiple circles traveling around the conic gradient mask.

.circle-animate2::before, .circle-animate2::after {
content: "";
grid-area: 1/1;
transform: rotate(30deg);
background:
    radial-gradient(closest-side at 50% 12.5%,currentColor 90%,#0000 98%) 
    50% 0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,currentColor 90%,#0000 98%) 
    0 50%/80% 20% repeat-x;
}
.circle-animate2:after{
    transform: rotate(60deg);
} 
@keyframes load {
        from {transform: rotate(0turn)}
        to   {transform: rotate(1turn)}
}

Adding the Loading Circle to a Webpage

To add the loading circle to a webpage, a div with the appropriate class is added to the HTML as follows:

<div class="loader" style="color:#627864;"></div>
<div class="loader" style="color:#866b69; width:200px;"></div>
<div class="loader" style="color:#aaa9a9; width: 50px;"></div>

The width attribute specifices the size of the loading circle. The default, as specified in the CSS, is 150px. The color can be specified using the color property.

The Final CSS

Here is the full CSS code for creating a circle spinner of dots.