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

In this tutorial we're going to be creating my favourite CSS loader it's the CSS only dot loader which has 5 dots and these will grow and shrink in line with while adding transparency to the dots.

The HTML

The HTML is similar to a previous loader, the walking circles where is has a wrapper div and 5 inner elements used as the dots.

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

The CSS

To start off with the CSS we need to create the wrapper div which is big enough to hold all of the dots in the line.

#dot-loader
{
    position: relative;
    margin: 2rem auto;
    width: 15rem;
}

Styling each dot will make them just as circles by using the border-radius. Each of these elements will have an animation of slideDotLoader lasting a duration of 1 second.

#dot-loader div
{
    width: 2.4rem;
    height: 2.4rem;
    background: #333;
    border-radius: 50%;
    display: inline-block;
    animation: slideDotLoader 1s infinite;
}

Each of these dots will need to have a different animation-delay set so we get a wave of dot movement. To select a specific dot we use the nth-child selector.

#dot-loader div:nth-child(1){ animation-delay: .1s; }
#dot-loader div:nth-child(2){ animation-delay: .2s; }
#dot-loader div:nth-child(3){ animation-delay: .3s; }
#dot-loader div:nth-child(4){ animation-delay: .4s; }
#dot-loader div:nth-child(5){ animation-delay: .5s; }

The slideDotLoader animation is actually quite simple you just need to use opacity and transform: scale(). At 0% we reset the element by using transform: scale(1);, at 50% we set the dot transparent by opacity: .3; then grow the dot by using transform: scale(2);, then at 100% we reset the element back to transform: scale(1);

@keyframes slideDotLoader {
    0% { transform: scale(1); }
    50% { opacity: .3; transform: scale(2); }
    100% { transform: scale(1); }
}

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