CSS Box 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 create a small box loader made up of 4 boxes and highlight the boxes in a clockwise rotation.

The HTML

The HTML is made up of of a wrapper div with 4 div's inside, these will have a class of box we can use to style each element.

<div class="box-loader">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

The CSS

The wrapper div is used to group together the 4 flashing boxes, for this we just need to set the width and height of the wrapper and add a position: relative this allows us to add an absolute position on each of the inner boxes.

.box-loader {
    position: relative;
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 2rem auto;
}

Each of the inner boxes will have a CSS class of box, these will simply need to be a square with an opacity of 0 to hide it by default. Then we add an animation of show onto the box, this animation is used to flash the boxes.

.box {
    width: 45%;
    height: 45%;
    background: rgba(0,0,0, 0.7);
    opacity: 0;
    animation: show 2s linear infinite;
}

For each of the inner boxes we set the absolute position to them to align them in the 4 different corners of the wrapper box. Then we can add a animation-delay to 3 of the boxes to rotate the flashes of the box in a clockwise direction.

.box:nth-child(1)
{
     position: absolute;
     top: 2.5%;
     left: 2.5%;
}

.box:nth-child(2) {
     position: absolute;
     top: 2.5%;
     right: 2.5%;
     animation-delay: 0.5s;
}

.box:nth-child(3) {
     position: absolute;
     bottom: 2.5%;
     right: 2.5%;
     animation-delay: 1s;
}

.box:nth-child(4) {
     position: absolute;
     bottom: 2.5%;
     left: 2.5%;
     animation-delay: 1.5s;
}

The show animation will be changing the opacity of the boxes from 0 to 1 causing the flash effect on each of the boxes.

@keyframes show {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

View the demo to see the full HTML and CSS.