CSS Square 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 CSS loader made up of 9 squares that flicker on and off.

#The HTML

The HTML for this loader is made up of a wrapper div and 9 HTML elements inside, in this tutorial we're going to use 9 divs for the different squares.

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

#The CSS

The CSS for this loader starts with the wrapper div, this just needs to be the width that we want the square loader to be.

#square-loader
{
    position: relative;
    width: 6rem;
    margin: 0 auto;
}

All the inner divs are the smaller squares on the loader, they're going to be 1 rem in height and width with a dark background. The opacity on all of the elements are set to 0 so that we can display them during the animation. Each of the squares are going to use the same animation of displaySquare but we need to make sure they appear at different times using animation-delay.

#square-loader div
{
    height: 1rem;
    width: 1rem;
    background: #333;
    margin: 0.25rem;
    opacity: 0;
    display: inline-block;

    animation: displaySquare 1s ease-in infinite;
}

The displaySquare animation is going to simply end with the opacity of 1 to fully display the element. This will give a fade-in effect to all of the squares on the loader.

@keyframes displaySquare{
    100%{ opacity: 1; }
}

To make the squares flicker around the loader we need to select each square using the nth-child selector and change the animation-delay on each of the squares.

#square-loader div:nth-child(1){ animation-delay: 0.4s; }
#square-loader div:nth-child(2){ animation-delay: 0.7s; }
#square-loader div:nth-child(3){ animation-delay: 0.3s; }
#square-loader div:nth-child(4){ animation-delay: 0.6s; }
#square-loader div:nth-child(5){ animation-delay: 1.7s; }
#square-loader div:nth-child(6){ animation-delay: 0.2s; }
#square-loader div:nth-child(7){ animation-delay: 0.5s; }
#square-loader div:nth-child(8){ animation-delay: 0.8s; }
#square-loader div:nth-child(9){ animation-delay: 0.1s; }

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