When users click on links or buttons in website to jump on another page or website or any files uploads and downloads, they expect that their request has been in processes. As a response website should give feedback to their request.

If website doesn’t give any feedback about user request then users thinks their request has not been processed and immediately navigates to other sites.

Loading animation can helps to keep user on webpage and prevents navigates to other websites.

html css loading animation

What is loading animation?

'Loading animation' notifies user that their request has been under process. When users click on links or buttons, the loading animation displayed until the user request has completed.

This post will show you some simple loading animations. Some basic CSS skills required for creating this loading animation. Knowledge of animation properties must needed.

Following are the examples of different styles of css loading animations.

CSS Shadow loading animation

CSS Dots loading animation

CSS Text loading animation

CSS Line loading animation

CSS Border loading animation

CSS flicker loading animation

CSS Shadow loading animation

<!DOCTYPE html>
<html>
<head>
<title>shadow loading animation</title>
<style>
div{
height:30px;
width:30px;
margin:50%;
background-color:#e6e5de;
box-shadow:25px 20px 20px #000000;
border-radius:50%;
animation:load;
animation-duration:3s;
animation-iteration-count:infinite;
transform:translate(0px);
}
@keyframes load
{
0%{box-shadow:25px 20px 20px #000000;}
25%{box-shadow:-25px 20px 20px #000000;}
45%{box-shadow:-25px -20px 20px #000000;}
75%{box-shadow:30px -20px 20px #000000;}
90%{box-shadow:30px -25pxpx 20px #000000;}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Output of shadow loading animation::-

CSS Dots loading animation

HTML:-

<!DOCTYPE html>
<html>
<head>
<title>dots loading animation</title>
<link rel="stylesheet" href="dotloading.css"">
</head>
<body>
<div>
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
<span id="dot4"></span>
</div>
</body>
</html>

CSS:-

div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
height:100px;
width:200px;
background-color:transparent;
}
#dot1,#dot2,#dot3,#dot4,#dot5
{
position:absolute;
top:40px;
height:20px;
width:20px;
border-radius:50%;
background-color:#c2c2c2;
animation-name:dots;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes dots
{
from{transform:scale(0);}
to{transform:scale(1);}
}
#dot1
{
left:25px;
animation-delay:0s;
}
#dot2
{
left:70px;
animation-delay:0.50s;
}
#dot3
{
left:115px;
animation-delay:1s;
}
#dot4
{
left:160px;
animation-delay:1.5s;
}

Output of dots loading animation::-

CSS Text loading animation

HTML:-

<!DOCTYPE html>
<html>
<head>
<title>text loading animation</title>
<link rel="stylesheet" href="textloading.css"">
</head>
<body>
<div>
<span id="l">L</span>
<span id="o">O</span>
<span id="a">A</span>
<span id="d">D</span>
<span id="i">I</span>
<span id="n">N</span>
<span id="g">G</span>
<span id="dot1">.</span>
<span id="dot2">.</span>
<span id="dot3">.</span>
</div>
</body>
</html>

CSS:-

div
{
margin-top:50%;
margin-left:50%;
transform:translate(-50%,-50%);
}
span
{
font-family:'Times New Romans','serif';
font-weight:bold;
font-size:20pt;
color:#4b0082;

}
#l,#o,#a,#d,#i,#n,#g
{
position:absolute;
margin-left:5px;
text-shadow:3px 3px 5px #4b0051;
animation-name:loading;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
#o
{
position:absolute;
margin-left:20px;
}
@keyframes loading
{
0%{transform:rotate(0deg);}
30%{transform:rotate(15deg);}
60%{transform:rotate(25deg);}
90%{transform:rotate(45deg);}
}
#a
{
position:absolute;
margin-left:40px;
}
#d
{
position:absolute;
margin-left:60px;
}
#i
{
position:absolute;
margin-left:80px;
}
#n
{
position:absolute;
margin-left:90px;
}
#g
{
position:absolute;
margin-left:110px;
}
#dot1
{
position:absolute;
margin-left:130px;
animation-name:dot1anim;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes dot1anim
{
from{margin-left:130px;}
to{margin-left:135px;}
}
#dot2
{
position:absolute;
margin-left:140px;
animation-name:dot2anim;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes dot2anim
{
from{margin-left:140px;}
to{margin-left:145px;}
}
#dot3
{
position:absolute;
margin-left:150px;
animation-name:dot3anim;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes dot3anim
{
from{margin-left:150px;}
to{margin-left:155px;}
}

Output of text loading animation::-

CSS Line loading animation

HTML:-

<!DOCTYPE html>
<html>
<head>
<title>loading bar animation</title>
<link rel="stylesheet" href="loadingbar.css"">
</head>
<body>
<div>
<span class="bar">
</span>
<p>Loading 
<span class="dot">.</span>
<span class="dot">.</span>
<span class="dot">.</span></p>
</div>
</body>
</html>

CSS:-

div
{
position:relative;
margin-top:50%;
margin-left:50%;
transform:translate(-50%);
height:1px;
width:200px;
border:3px solid #999a9a;
}
.bar
{
position:absolute;
height:1px;
width:1%;
background-color:#ff0000;
animation:loading 3s linear infinite;
}
@keyframes loading
{
0%{width:1%;}
10%{width:20%;}
20%{width:40%;}
30%{width:60%;}
40%{width:80%;}
50%{width:100%;}
60%{width:80%;}
70%{width:60%;}
80%{width:40%;}
90%{width:20%;}
100%{width:1%;}
}
p
{
position:absolute;
margin-left:35%;
}
.dot
{
opacity:0.1;
font-size:16pt;
animation:dots 3s linear infinite;
}
.dot:nth-child(1)
{
animation-delay:0s;
}
.dot:nth-child(2)
{
animation-delay:0.5s;
}
.dot:nth-child(3)
{
animation-delay:1s;
}
@keyframes dots
{
0%{opacity:0.1;}
50%{opacity:0.5;}
100%{opacity:1;}
}

Output of line loading animation::-

CSS Border loading animation

HTML:-

<!DOCTYPE html>
<html>
<head>
<title>border loading animation</title>
<link rel="stylesheet" href="border loading.css"">
</head>
<body>
<div>
<span>loading</span>
</div>
</body>
</html>

CSS:-

div
{
position:relative;
margin-top:50%;
margin-left:50%;
transform:translate(-50%);
height:70px;
width:70px;
border:10px dotted #c2c2c2;
border-radius:50%;
animation:borderload 3s linear infinite;
}
span
{
position:absolute;
top:25px;
left:10px;
}
@keyframes borderload
{
0%{border-top-color:#0000ff;}
20%{border-top-color:none;border-right-color:#0000ff;}
40%{border-top-color:none;border-right-color:none;border-bottom-color:#0000ff;}
60%{border-top-color:none;border-right-color:none;border-bottom-color:none;border-left-color:#0000ff;}
80%{border-top-color:none;border-right-color:none;border-bottom-color:none;border-left-color:none;}
}

Output of dotted border loading animation::-

You can set different border styles to give different looks to your loading animation.

Following show dashed border style loading animation.

border:10px dashed #c2c2c2;

Output of dashed border loading animation::-

flicker loading animation

Flicker loading animation is unsteadiness, blinking effect in animation.

Following is an example of flicker text loading animation.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<head>
<link rel="stylesheet" href="flickertext.css">
</head>
<body>
<div>
<span class="l">L</span>
<span class="o">O</span>
<span class="a">A</span>
<span class="d">D</span>
<span class="i">I</span>
<span class="n">N</span>
<span class="g">G</span>
</div>
</body>
</html>

CSS

body
{
background-color:#333333;
}
div
{
position:absolute;
top:50%;
left:50%;
font-size:24pt;
font-weight:bold;
font-family:Georgia,serif;
transform:translate(50%);
color:#f00088;
text-shadow:5px 5px 20px #0000ff;
animation:flicker 3s linear infinite;
}
@keyframes flicker
{
10%{opacity:0;text-shadow:5px 5px 20px #0000ff;}
20%{opacity:1;text-shadow:5px 5px 20px #f00000;}
50%{opacity:0.02;text-shadow:5px 5px 20px #0000ff;}
60%{opacity:0.3;text-shadow:5px 5px 20px #f00011;}
65%{opacity:1;text-shadow:5px 5px 20px #f00000;}
75%{opacity:0.2;text-shadow:5px 5px 20px #0000ff;}
100%{opacity:1;text-shadow:5px 5px 20px #f00010;}
}