CSS Loader
CSS Loader
The loader is the animation that can alert a visitor regarding the loading of the page. We need to wait for some time. It will be helpful if any page takes a few seconds for loading of the webpage content. A visitor could assume that the website is unresponsive if he does not use the loader over any webpage.
With the use of the loader in CSS, we can create a visitor waited or distracted for a few seconds until a page gets completely loaded.
We may understand the CSS loader concept with the use of the following demonstrations.
Consider the below examples:
Example:1
<!DOCTYPE html>
<html>
<head>
<title> CSS loader </title>
<style>
h1
{
color:blue;
}
div
{
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.6s;
}
@keyframes rotate
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.d1
{
animation-delay: 0.1s;
background-color: red;
}
.d2
{
animation-delay: 0.2s;
background-color: blue;
}
.d3
{
animation-delay: 0.3s;
background-color: yellow;
}
.d4
{
animation-delay: 0.4s;
background-color: lightblue;
}
.d5
{
animation-delay: 0.5s;
background-color: lime;
}
</style>
</head>
<body>
<center>
<h1> CSS Loader </h1>
<div class='d1'></div>
<div class='d2'></div>
<div class='d3'></div>
<div class='d4'></div>
<div class='d5'></div>
</center>
</body>
</html>
Output:
Example:2
In the following example, we will use spinner in this another demonstration of the CSS loader.
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-align:center;
}
.loader
{
border: 20px solid #f3f3f3;
position:absolute;
left:43%;
border-radius: 50%;
border-top: 20px solid navy;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>CSS Loader</h1>
<div class="loader"></div>
</body>
</html>
In this example, we have specified the border property of CSS, which describes the loader’s border size and border color. Here, we have also applied the border-radius attribute of CSS, which transforms a border into a circle.
We have applied the border-top attribute of CSS for the navy thing that will spin around inside the border. The loader's size is described with the use of the height and width properties. In the last, we have included the animation which create the navy thing spin endless times along with the 2s animation speed.
Output:
The following another demonstration of loader.
Example:3
In the above-mentioned example, we have added only the border-top attribute of CSS, but in this demonstration, we will also add the border-right, border-left, and border-bottom attributes of CSS.
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-align:center;
}
.loader
{
border: 20px solid #f3f3f3;
position:absolute;
border-radius: 50%;
border-top: 20px solid navy;
border-bottom: 20px solid navy;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
.loader1
{
border: 20px solid #f3f3f3;
position:absolute;
left:43%;
border-radius: 50%;
border-top: 20px solid navy;
border-bottom: 20px solid yellow;
border-right: 20px solid red;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
.loader2
{
border: 20px solid #f3f3f3;
position:absolute;
left:80%;
border-radius: 50%;
border-top: 20px solid navy;
border-bottom: 20px solid yellow;
border-right: 20px solid red;
border-left:20px solid magenta;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>CSS Loader</h1>
<div class="loader"></div>
<div class="loader1"></div>
<div class="loader2"></div>
</body>
</html>
Output:
