CSS 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 create a circle loader where a bar rotates around the circle.

The HTML

To start with the HTML for the loader is simply on element with the id of circle-loader.

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

The CSS

The CSS for the circle loader starts by adding the border-radius property to make it a circle.

#circle-loader
{
    border-radius: 50%;
    width: 7rem;
    height: 7rem;
}

With the element now a circle adding the different border colours will show it as a ring with one section being a different colour, this will create the bar inside the ring. To make it look like the bar is rotating around the ring we can now rotate the entire element.

#circle-loader {
    margin: 2rem auto;
    position: relative;
    border-top: 1.1em solid rgba(0, 0, 0, 0.2);
    border-right: 1.1em solid rgba(0, 0, 0, 0.2);
    border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
    border-left: 1.1em solid #333;
    animation: rotateCircleLoader 1.1s infinite linear;
}

The rotateCircleLoader animation will now need to rotate the entire element by using the transform property with the rotate value from 0 to 360.

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

View the demo to see this loader in action.