CSS Animated Circle Spinner

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 create an animated CSS circle spinner like the image above but just by using HTML and CSS.

#The HTML

To create the animated circle like the above we just need a single HTML element.

<div id="animated-circle-1"></div>

We will then use pseudo selectors to create two new elements to act as the face of the circle which is what you see spinning around.

#The CSS

To start with styling this animated circle we're going to create the pseudo elements and set all of these elements to have a border-radius of 50%, making a circle. To create the ring inside the background element we can do this by using box-shadow with a value property of inset, which will apply the shadow to the inside of the element.

#animated-circle-1,
#animated-circle-1:before,
#animated-circle-1:after {
    border-radius: 50%;
}

#animated-circle-1
{
    margin: 1rem auto 5rem;
    position: relative;
    width: 10rem;
    height: 10rem;
    box-shadow: inset 0 0 0 1em;
}

Creating the pseudo elements with an absolute position will allow us to position the element exactly where we want inside the circle.

#animated-circle-1:before,
#animated-circle-1:after {
    position: absolute;
    content: '';
    background: #F5F5F5;
}

The first pseudo element is going to use the :before selector. This is going to be a semi-circle that is overlaid onto of the circle. Changing the border-radius on just two corners will create the semi circle. We're going to rotate this element inside the circle the animation will use the transform: rotate(360deg) property. The problem with rotating an element is that they're not rotated in the center of the element but at the top left of the element. Therefore we need to use the CSS property transform-origin to change the location the transform will start from. Then we can add the animation of rotateRound starting the animation after 1.5 seconds.

#animated-circle-1:before {
    width: 5.1rem;
    height: 10.2rem;
    border-radius: 10.2rem 0 0 10.2rem;
    top: -0.1rem;
    left: -0.1rem;
    transform-origin: 5.1rem 5.1rem;
    animation: rotateRound 2s infinite ease 1.5s;
}

The :after pseudo element will again be a semi circle the only difference is the position that it starts in and the animation delay is going to be set to 0.5 seconds.

#animated-circle-1:after {
    width: 5.2rem;
    height: 10.2rem;
    border-radius: 0 10rem 10rem 0;
    top: -0.1rem;
    left: 4.9rem;
    transform-origin: 0.1rem 5.1rem;
    animation: rotateRound 2s infinite ease 0.5s;
}

The animation will rotate the element in 360 degrees starting from 0 and ending in the full circle.

@keyframes rotateRound {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

That's all the CSS you need to replicate this CSS spinner, view the demo to see the full HTML and CSS.