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}
}