Create a loader animation with CSS

This tutorial will explain how to create a simple loader animation using pure CSS.

Here we will be using a loader with five horizontal bar.

First we will put in the HTML for the 5 bars

<div id="loader">

<div id="one">
</div>

<div id="two">
</div>

<div id="three">
</div>

<div id="four">
</div>

<div id="five">
</div>

</div>

 

And then we will write the CSS for the bars

#loader{
    position:fixed;
    height:100px;
    top:40%;
    left:50%;
    transform:rotate(180deg);
}

#one, #two, #three, #four, #five{
    position:relative;
    top:0px;
    height:100px;
    width:15px;
    background-color:black;
    margin:1px;
    float:left;
    animation:load 1s infinite;
}

 

Now with this five bars we will create a loader animation

#one{
    animation:loadone 1s infinite;
}

#two{
    animation:loadtwo 1s infinite;
}

#three{
    animation:loadthree 1s infinite;
}

#four{
    animation:loadfour 1s infinite;
}

#five{
    animation:loadfive 1s infinite;
}

@keyframes loadfive{
    0%{height:0px}
    30%{height:100px}
    60%{height:0px}
    100%{height:0px}
}

@keyframes loadfour{
    0%{height:0px}
    10%{height:0px}
    40%{height:100px}
    70%{height:0px}
    100%{height:0px}
}

@keyframes loadthree{
    0%{height:0px}
    20%{height:0px}
    50%{height:100px}
    80%{height:0px}
    100%{height:0px}
}

@keyframes loadtwo{
    0%{height:0px}
    30%{height:0px}
    60%{height:100px}
    80%{height:0px}
    100%{height:0px}
}

@keyframes loadone{
    0%{height:0px}
    40%{height:0px}
    70%{height:100px}
    100%{height:0px}
}