CSS Lined 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 create a CSS loader that starts off as a circle and then grows out to be a line of circles.

#The HTML

The HTML is made up of a wrapper element with 6 child elements inside, the 6 child elements will be used for the smaller circles which will appear out of the main circle.

<div id="lined-circles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

#The CSS

The CSS for the wrapper DIV will be used for the middle circle, to make a circle we simply need to set the width, height and the border-radius: 50%;.

#lined-circles {
    width: 2rem;
    height: 2rem;
    background: #333;
    border-radius: 50%;
    position: relative;
    margin: 2rem auto;
}

The child elements will also need to be styled as a circle.

#lined-circles div
{
    width: 2rem;
    height: 2rem;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

Each of the child elements will need to use their own animation, therefore we use the nth-child property to select a specific element and then apply the animation.

#lined-circles div:nth-child(1) {
    animation: animateFirst 1.5s infinite;
}

#lined-circles div:nth-child(2) {
    animation: animateSecond 1.5s infinite;
}

#lined-circles div:nth-child(3) {
    animation: animateThird 1.5s infinite;
}

#lined-circles div:nth-child(4) {
    animation: animateFourth 1.5s infinite;
}

#lined-circles div:nth-child(5) {
    animation: animateFifth 1.5s infinite;
}

#lined-circles div:nth-child(6) {
    animation: animateSixth 1.5s infinite;
}

The first animation will be circle that moves out on the far left we're going to use the css property transform: translateX and then transform: scale to make the element smaller during the animation. The first 3 animations will move the circles to the left whereas the last 3 elements will move the circles to the right.

@keyframes animateFirst {
    25% { transform: translateX(-1.5rem) scale(0.75); }
    50% { transform: translateX(-4.5rem) scale(0.6) }
    75% { transform: translateX(-7.5rem) scale(0.5) }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animateSecond {
    25% { transform: translateX(-1.5rem) scale(0.75); }
    50%,
    75% { transform: translateX(-4.5rem) scale(0.6) }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animateThird {
    25%,
    75% { transform: translateX(-1.5rem) scale(0.75); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animateFourth {
    25%,
    75% { transform: translateX(1.5rem) scale(0.75); }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animateFifth {
    25% { transform: translateX(1.5rem) scale(0.75); }
    50%,
    75% { transform: translateX(4.5rem) scale(0.6) }
    95% { transform: translateX(0rem) scale(1); }
}

@keyframes animateSixth {
    25% { transform: translateX(1.5rem) scale(0.75); }
    50% { transform: translateX(4.5rem) scale(0.6) }
    75% { transform: translateX(7.5rem) scale(0.5) }
    95% { transform: translateX(0rem) scale(1); }
}

With each of the circles having different animations but with the same duration they will create the above image. View the demo to see the HTML and CSS.