CSS Half Circle Of Circles

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 image which is half a circle made up of circles which rotate in a circle.

#The HTML

The HTML for the CSS loader is very simple it's just one element which in this example I'm using a DIV that has an ID of half-circle-circles.

<div id="half-circle-circles"></div>

#The CSS

If you've seen a previous tutorial of the full circle of circles, this example uses one HTML element and a trick of using multiple box-shadow that gives the illusion of a circle of circles and then in the duration of the animation the circle move around the center point.. This loader uses the same technique but will only show half a circle of different sizes and will move these points around the center point of the circle. We start off by creating a circle using width, height and border-radius making a circle in the CSS. Then we add an animation of halfCircleCircles.

#half-circle-circles {
    margin: 2rem auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: relative;
    animation: halfCircleCircles 1.3s infinite linear;
}

The halfCircleCircles animation will create the circles and at every 12.5% of the animation we move the circles around at different points.

@keyframes halfCircleCircles {
    0%,
    100% {
        box-shadow: 0 -3rem 0 0.2rem,
        2rem -2rem 0 0,
        3rem 0 0 -1rem,
        2rem 2rem 0 -1rem,
        0 3rem 0 -1rem,
        -2rem 2rem 0 -1rem,
        -3rem 0 0 -1rem,
        -2rem -2rem 0 0;
    }
    12.5% {
        box-shadow: 0 -3rem 0 0,
        2rem -2rem 0 0.2rem,
        3rem 0 0 0,
        2rem 2rem 0 -1rem,
        0 3rem 0 -1rem,
        -2rem 2rem 0 -1rem,
        -3rem 0 0 -1rem,
        -2rem -2rem 0 -1rem;
    }
    25% {
        box-shadow: 0 -3rem 0 -0.5rem,
        2rem -2rem 0 0,
        3rem 0 0 0.2rem,
        2rem 2rem 0 0,
        0 3rem 0 -1rem,
        -2rem 2rem 0 -1rem,
        -3rem 0 0 -1rem,
        -2rem -2rem 0 -1rem;
    }
    37.5% {
        box-shadow: 0 -3rem 0 -1rem,
        2rem -2rem 0 -1rem,
        3rem 0 0 0,
        2rem 2rem 0 0.2rem,
        0 3rem 0 0,
        -2rem 2rem 0 -1rem,
        -3rem 0 0 -1rem,
        -2rem -2rem 0 -1rem;
    }
    50% {
        box-shadow: 0 -3rem 0 -1rem,
        2rem -2rem 0 -1rem,
        3rem 0 0 -1rem,
        2rem 2rem 0 0,
        0 3rem 0 0.2rem,
        -2rem 2rem 0 0,
        -3rem 0 0 -1rem,
        -2rem -2rem 0 -1rem;
    }
    62.5% {
        box-shadow: 0 -3rem 0 -1rem,
        2rem -2rem 0 -1rem,
        3rem 0 0 -1rem,
        2rem 2rem 0 -1rem,
        0 3rem 0 0,
        -2rem 2rem 0 0.2rem,
        -3rem 0 0 0,
        -2rem -2rem 0 -1rem;
    }
    75% {
        box-shadow: 0 -3rem 0 -1rem,
        2rem -2rem 0 -1rem,
        3rem 0 0 -1rem,
        2rem 2rem 0 -1rem,
        0 3rem 0 -1rem,
        -2rem 2rem 0 0,
        -3rem 0 0 0.2rem,
        -2rem -2rem 0 0;
    }
    87.5% {
        box-shadow: 0 -3rem 0 0,
        2rem -2rem 0 -1rem,
        3rem 0 0 -1rem,
        2rem 2rem 0 -1rem,
        0 3rem 0 -1rem,
        -2rem 2rem 0 0,
        -3rem 0 0 0,
        -2rem -2rem 0 0.2rem;
    }
}

That's all the HTML and CSS we need for the loader view the demo to see the loader in action.