07/09/2020    By: christoper unum
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.
Basic knowledge of HTML and CSS is required to understand the concepts in this tutorial.
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>
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;}
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.
![]() |
how to add on scroll animations to your website using animate.css and wow.js By christoper unum |
![]() |
how to create a login form using html, css, javascript, php and ajax By christoper unum |
![]() |
how to create a registration page using ajax and php By christoper unum |
Copyright © 2022 Naishare Technology - All rights reserved