CSS Square Filler

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 make a CSS loader of a square that fills up the background from the bottom to the top.

The HTML

The HTML for the square filler is very simple it's just one HTML div that will be used to fill the background colour.

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

The CSS

The CSS for this will need to create a square and then fill up the background colour of the box from the bottom to the top. First we create a square with a black border using the width and height properties. Then we add an animation of fillSquare running for a duration of 5 seconds.

#square-filler{
    width: 4rem;
    height: 4rem;
    border: 1px  rgba(0,0,0,1) solid;
    margin: 36px auto;
    position: relative;
    animation: fillSquare 5s linear infinite;
}

To fill the square up with a background colour we will need to do something a bit different, you would think we will need to use the background-color property. The problem with this is that it will fill the entire box where we want it to slowly fill the box, therefore we use the property box-shadow with inset to set the box shadow inside the box. This means we can change the height of the box-shadow the same colour of the border to fill up the background of the box.

@keyframes fillSquare{
    0%{ box-shadow: inset 0 0 0 0 rgba(0,0,0,0.1);}
    100%{ box-shadow: inset 0 -4rem 0 0 rgba(0,0,0,1);}
}

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