CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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:

CSS Loader

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:

CSS Loader

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:

CSS Loader



ADVERTISEMENT
ADVERTISEMENT