how to create a simple page loader using html and css

Creating a page loader isn't as complicated as it looks, you can either use a GIF image or you can use HTML and CSS to design it. In this tutorial, we will be creating a simple page loader using only HTML and CSS. 

Prerequisite

Basic knowledge of HTML and CSS  is required to understand the concepts in this tutorial.

HTML

In the HTML code shown below, 3 div elements have created and housed in another div container.

<div id="loader-container">
  <div id="loader-one" class="loader"></div>
  <div id="loader-two" class="loader"></div>
  <div id="loader-three" class="loader"></div>
</div>

CSS

In the CSS code, the 3 div elements have been style to be vertically parallel to each other. Using CSS animation (@keyframes), we have been able to animate the 3 div elements in such a way that the first and third div move in the same direction while the second div moves in the opposite direction.

body {
  font-family: "Fira Sans", sans-serif;
}
#loader-container{
  text-align:center;
  padding:20px;
  height:80px;
  vertical-align: center;
}

.loader{
  display:inline-block;
  width:5px;
  height:20px;
  margin:0.3px;
  background:#207AC9;
}
@keyframes move {
  0%   {height:20px;}
  50%  {height:10px;}
  100% {height:20px;}
}

@keyframes move2 {
  0%   {height:10px;}
  50%  {height:20px;}
  100% {height:10px;}
}
#loader-one{
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#loader-two{
  animation-name: move2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#loader-three{
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

Conclusion

Hope you were able to understand our simple page loader tutorial. If you want to learn more about CSS animation, you can click here to get started.