CSS Walking 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. CSS Loaders

In this tutorial we're going to create a CSS loader which gives you the effect of walking dots playing on the normal scrolling dots loader.

The HTML

The HTML consists of a wrapper DIV with 5 elements inside. The 5 elements inside are going to be the dots used for walking and jumping to the front of the line.

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

The CSS

The wrapper div will just need to define the the size of the wrapper this will give your dots enough room to fit in the area to jump to the start of the line.

#walking-circles {
    width: 10rem;
    height: 4rem;
    position: relative;
    margin: 2rem auto;
}

Then we can style the dots inside the wrapper, for these we just need to create circles using the border-radius, all of the dots will need to have position absolute so that we're able to exactly place them inside the wrapper div. All of the dots will use the same animation but we'll need to change the animation-delay on each of the dots.

#walking-circles div {
    width: 2rem;
    height: 2rem;
    background: #333;
    border-radius: 50%;
    position: absolute;
    animation: animate 2s linear infinite;
}

To change the animation-delay on each of the dots we're going to use nth-child to select a specific child element and change the delay on these.

#walking-circles div:nth-child(1) { }
#walking-circles div:nth-child(2) { animation-delay: -.4s; }
#walking-circles div:nth-child(3) { animation-delay: -.8s; }
#walking-circles div:nth-child(4) { animation-delay: -1.2s; }
#walking-circles div:nth-child(5) { animation-delay: -1.6s; }

The animation keyframes will be broken up to perform the scrolling and jumping on the dots. First it starts by moving the dot to the right of the line, for 80% of the animation it will move the dot to the back of the line. At 85% we move the dot up using top: -2rem, reset the width and height to normal. At 90% we change the size of the dot to an oval which gives the effect of it moving fast. At 95% we then move the dot to the front of the line still at -2rem and reset the width and height. Finally at 100% we move the dot back in line.

@keyframes animate {
    0% { left: 10rem; top:0}
    80% { left: 0; top:0;}
    85% { left: 0; top: -2rem; width: 2rem; height: 2rem;}
    90% { width: 4rem; height: 1.5rem; }
    95% { left: 10rem; top: -2rem; width: 2rem; height: 2rem;}
    100% { left: 10rem; top:0; }
}

View the demo to see the HTML and CSS in action.