CSS Three Bar Loader

This is the first post in the series of creating CSS only loaders. Loaders are used to show the user that the app is busy preforming a task and that you need to wait for this to finish. There are many ways you can handle displaying a loader with the most popular way being by simply using an animated gif like the image above. The problem with this is that once the image is placed on the page it's fixed, you can't change the colour, you can't change the size or the speed of the animation, for a more flexible approach to creating loaders is by using CSS animation and transition to create you loader. Having the loader in pure CSS makes it easy to change the size, colour or animation speed all with CSS. In this series we're going to create 25 different loaders all in CSS starting with a three bar loader commonly seen on Facebook.

#The HTML

To start off we need to add the HTML to the page, to create the three bar loader it's very easy all we need is one HTML element.

<div id="three-bar-loader"></div>

As there are 3 bars we're going to use pseudo classes :before and :after to create the other bars.

#The CSS

The first bit of CSS is going to be the middle bar, for this we just set a animation-delay so the bars aren't moving at the same time and it creates a flow effect.

#three-bar-loader {
    animation-delay: -0.15s;
}

Using the pseudo classes :before and :after we can create a new element and set the width, height and background colour the same on all elements. We've also added the threeBarLoad animation to the elements. This is what we will use to increase the height of the bars.

#three-bar-loader,
#three-bar-loader:before,
#three-bar-loader:after {
    background: #333;
    animation: threeBarLoad 1s infinite ease-in-out;
    width: 1rem;
    height: 4rem;
}

#three-bar-loader:before,
#three-bar-loader:after {
    position: absolute;
    content: '';
}

Next we position the before and after elements using left and set the animation-delay onto the before element to make sure this animation starts first.

#three-bar-loader:before {
    left: -1.5rem;
    animation-delay: -0.3s;
}
#three-bar-loader:after {
    left: 1.5rem;
}

The last thing we need to do is define the animation for the threeBarLoad, to create the flow effect we will need to increase and reset the height of the element. But by simply using the height property will not create the flow effect as it will simple grow the bottom of the bars and the top will be fixed in position. To create the flow effect we need to both grow the bar from the top and the bottom. One way of doing this will be to change the height then re-position the element to give the illusion of it growing from the top and bottom, but if this doesn't happen instantly you'll see the change of position. Another approach is to use the box-shadow property to add a shadow to the top of the bar. If the shadow is the same colour as the bar it will simply look like it's growing from the top.

@keyframes threeBarLoad {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4rem;
    }
    40% {
        box-shadow: 0 -2rem;
        height: 5rem;
    }
}

That's it, this will continue to show that flowing effect, to turn it off you can simply hide the element in your application. View the demo to see to the HTML and CSS in action.

<div id="three-bar-loader"></div>