CSS Three Circle Loader

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please wait. In this tutorial we're going to learn how to create the above example in pure CSS using pseudo selectors, animation and transitions. We're going to create three circle that grow in and out one at a time to show a slow effect.

The HTML

The HTML for the three circle loader is very simple it's just one HTML element, then we'll use pseudo selectors to create 2 other circle elements with the :before and :after selector.

<div id="three-circle-loader"></div>

The CSS

First we create the 3 circles using the pseudo selectors :before and :after. To create circles we use width and height to create the element, then using border-radius at 50% it will fully round the element, creating the circle. We also add the threeCircleLoader animation at a duration of 1.8 seconds.

#three-circle-loader,
#three-circle-loader:before,
#three-circle-loader:after {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    animation: threeCircleLoader 1.8s infinite ease-in-out;
}

#three-circle-loader:before,
#three-circle-loader:after {
    content: '';
    position: absolute;
}

We need to change the animation-delay on the different circles so that they grow in and out at different times. Then we can position the circles differently by using the left property.

#three-circle-loader {
    animation-delay: -0.15s;
}

#three-circle-loader:before {
    left: -3.5rem;
    animation-delay: -0.30s;
}
#three-circle-loader:after {
    left: 3.5rem;
}

To display the circle in a growing effect we can use the approach similar to the three bar loader by using box-shadow to grow and shrink the circles.

@keyframes threeCircleLoader {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5rem 0 -1.3rem;
    }
    40% {
        box-shadow: 0 2.5rem 0 0;
    }
}

View the demo to this spinner in action.