CSS Block 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 a CSS loader like the image above of floating block of boxes.

#The HTML

The HTML for this loader will consist of a wrapper div with 16 div's inside using the class of block. Each one of these blocks will have animation applied to them for changing colour and bouncing during the animation.

<div class="block-container">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
</div>

#The CSS

With the HTML on the page we can create the CSS for the loader. The block container is mainly used for styling, it needs to be wide enough for all the blocks to be in place and we can add a margin to make sure it's centered. Each block element will need to be a square with a background colour, that's all we need to do styling on the block, then we can add the animation of wave to each block.

.block-container
{
    width: 9rem;
    margin: 2rem auto;
}

.block {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 3px;
    background: #333;
    animation: wave 2s ease .0s infinite;
}

To make the blocks wave we need to delay the start of the animation on the columns to happen at different times. Therefore we can use nth-child selector to select all every 4th element and add different delays per columns.

.block:nth-child(4n+1) { animation-delay: 0s; }
.block:nth-child(4n+2) { animation-delay: 0.2s; }
.block:nth-child(4n+3) { animation-delay: 0.4s; }
.block:nth-child(4n+4) { animation-delay: 0.6s; margin-right: 0; }

To create the wave we want the element to raise up 30 pixels then back down to 0, we use the top property to move the blocks up. We then need to change the opacity from 1 to 0.2.

@keyframes wave {
    0%   { top: 0;     opacity: 1; }
    50%  { top: 30px;  opacity: .2; }
    100% { top: 0;     opacity: 1; }
}

That's all we need to create this animation, view the demo to see this HTML and CSS in action.