How to Make HTML CSS Loader Spinner in Website

How to Make HTML CSS Spinner loader (Some Explanation on how it works:)
The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

The  light blue thing that spins around inside the border is specified with the border-top property. You can also include border-bottom, border-left and/or border-right if you want more “spinners” (see example below).The size of the loader is specified with the width and height properties.

At final, we add an animation that makes the blue thing spin forever with a 2 second animation speed or we can increase it.

The first step to Make HTML CSS loader in Website:

1.Add HTML:

<div class=”loader”></div>

2.Add css styles in your stylesheet:

<style>
.loader {
border: 16px solid #e3e3e3;
border-radius: 50%;
border-top: 12px solid aqua;
margin:auto;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;

/* Circle*/
animation: spin 2s linear infinite;
}
* ciruclar disc *
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
<p>@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

 

Here is Some Good Example of How the HTML CSS Loader works in real website:

 

 

Try to Make Your Own HTML CSS Loader Script, Here are the codes:

<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Add animation to “page content” */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}

@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}

#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload=”myFunction()” style=”margin:0;”>

<div id=”loader”></div>

<div style=”display:none;” id=”myDiv” class=”animate-bottom”>
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>

<script>
var myVar;

function myFunction() {
myVar = setTimeout(showPage, 3000);
}

function showPage() {
document.getElementById(“loader”).style.display = “none”;
document.getElementById(“myDiv”).style.display = “block”;
}
</script>

You may also like...