CSS Battery 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 CSS loader that will give the effect of a charging battery animation.

The HTML

The HTML is going to be very simple it's just one HTML element, we will need to add another element using pseudo :after to create the end of the battery.

<div id="battery"></div>

The CSS

To style the battery we first need the outline of the battery casing, which is simply a rectangle. We will need to add the animation of charge to this element, on the charge animation we need to fill the battery in a duration of 5 seconds.

#battery{
    width: 4rem;
    height: 2rem;
    border: 1px #333 solid;
    border-radius: 2px;
    position: relative;
    animation: charge 5s linear infinite;
    margin: 0 auto;
}

The :after pseudo element is going to be used for the end of the battery, using position: absolute will allow us to position the end exactly where we want.

#battery:after{
    width: 0.4rem;
    height: 1rem;
    background-color: #333;
    border-radius: 0 1px 1px 0;
    position: absolute;
    content: "";
    top: 0.46rem;
    right: -0.4rem;
}

For the charge animation you would think that we need to do something clever with background-color but we can actually do this very easily using box-shadow and inset. This will fill the box shadow inside the battery element, by changing the horizontal shadow from 0 to the full width of the battery it will give this charging effect.

@keyframes charge{
    0%{box-shadow: inset 0 0 0 #333;}
    100%{box-shadow: inset 4rem 0 0 #333;}
}

View the demo for the full HTML and CSS.