Making ajax loader using CSS animation
There might be some pieces of your website which take longer than usual time to load. Rather than showing nothing or a blank page, you should show some loader on your website.
This makes user understand that some background work is going on, its not that their internet connection is broken or website is broken.
Though there are serveral ways to create a loader. CSS animations are lightest way to do it.
In this artcle, We'll create 2 style of ajax loaders using CSS animation.
Image by PixLoger from Pixabay
Round circle loader
This loader will look like a rotating wheel. HTML and CSS for this are below.
<!DOCTYPE html>
<html>
<head>
<title>Loading..</title>
<style>
h1{
color:blue;
}
.hf {
display: block;
position: absolute;
width: 10px;
height: 10px;
left: calc(50% - 1em);
border-radius: 1em;
transform-origin: 1em 2em;
animation: rotate;
animation-iteration-count: infinite;
animation-duration: 1.8s;
}
/* Rotation of loader dots */
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.hf1 {
animation-delay: 0.1s;
background-color: #030bfc;
}
.hf2 {
animation-delay: 0.2s;
background-color:#787cff;
}
.hf3 {
animation-delay: 0.3s;
background-color: #9598f5;
}
.hf4 {
animation-delay: 0.4s;
background-color: #c5c7fc;
}
.hf5 {
animation-delay: 0.5s;
background-color: #dfe0f7;
}
</style>
</head>
<body>
<center>
<h1>Loading...</h1>
<div class='loader'>
<div class='hf hf1'></div>
<div class='hf hf2'></div>
<div class='hf hf3'></div>
<div class='hf hf4'></div>
<div class='hf hf5'></div>
</div>
</center>
</body>
</html>
You can try out this code in HackersFriend Tryit Editor by copying it and pasting.
Horizontal moving loader
This loader will move horizontally. HTML and CSS for this will be written like this:
<!DOCTYPE html>
<html>
<head>
<title>Loading..</title>
<style>
h1{
color:blue;
}
.hf{
display: block;
position: absolute;
width: 100px;
height: 10px;
left: calc(58% - 5em);
transform-origin: 1px 10px;
animation: rotate;
animation-iteration-count: infinite;
animation-duration: 2.8s;
}
/* Rotation of loader dots */
@keyframes rotate {
from {
transform: rotateY(50deg);
}
to {
transform: rotateY(360deg);
}
}
.hf1 {
animation-delay: 0.1s;
background-color: #030bfc;
}
.hf2 {
animation-delay: 0.2s;
background-color:#787cff;
}
.hf3 {
animation-delay: 0.3s;
background-color: #9598f5;
}
.hf4 {
animation-delay: 0.4s;
background-color: #c5c7fc;
}
.hf5 {
animation-delay: 0.5s;
background-color: #dfe0f7;
}
</style>
</head>
<body>
<center>
<h1>Loading...</h1>
<div class='loader'>
<div class='hf hf1'></div>
<div class='hf hf2'></div>
<div class='hf hf3'></div>
<div class='hf hf4'></div>
<div class='hf hf5'></div>
</div>
</center>
</body>
</html>
You can try out this code in HackersFriend Tryit Editor by copying it and pasting.
