How to design HTML Loader using HTML CSS JAVASCRIPT
See the Pen Html loader 3 by Ankit kumar (@Kumar-Ankit56) on CodePen.
What! No no… You don’t need any master’s degree in front-end development for this project. This blog is only for you. Just keep your hand free for scrolling down to know more in steps.π.
- HTML
- CSS
- JAVASCRIPT(ES6) BASIC
- CODEPEN
- VSCODE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Loader</title>
<meta charset="utf-8">
</head>
<body>
<h2>Keep patience your website is loading</h2>
<div class="loader"></div>
</body>
</html>
I’m not giving any element to the div tag because we will design the loader just by loader class.
<div class="loader"></div>
CSS SECTION
.loader{
border: 10px solid #d9d9d9; /* Light grey */
border-top: 10px solid #ff3300; /* Blue */
border-radius: 50%;
margin:auto;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
h2{
text-align: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Code explanation
- border-left;
- border-right;
- border-button
animation
that makes the blue thing spin forever with a 2-second animation speed. See the Pen Html loader 1. by Ankit kumar (@Kumar-Ankit56) on CodePen.
So, this is just a simple loader using HTML and CSS with one border property.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Loader</title>
<meta charset="utf-8">
</head>
<body>
<h2>Keep patience your website is loading</h2>
<div class="container">
<div class="loader"></div>
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
</div>
</body>
</html>
Same code as above but we are adding 3 more loaders with the different classes to observe all the border property.
.container{
width:100%;
height:100vh;
display: flex;
justify-content:center;
align-item:center;
margin:10px;
padding:10px;
}
h2{
text-align:center;
}
.loader{
border: 10px solid #d9d9d9; /* Light grey */
border-top: 10px solid #ff3300;
border-radius: 50%;
width: 110px;
height: 110px;
animation: spin 2s linear infinite;
}
.loader1{
border: 10px solid #d9d9d9; /* Light grey */
border-top: 10px solid #ff3300; /* Blue */
border-bottom: 10px solid #ff1a1a;/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
aline-item:center;
}
.loader2{
border: 10px solid #d9d9d9; /* Light grey */
border-top: 10px solid #ffb3ff; /* Blue */
border-bottom: 10px solid #1a1aff;/* Blue */
border-left: 10px solid #ff6666;/* Blue */
border-radius: 50%;
width: 130px;
height: 130px;
animation: spin 2s linear infinite;
}
.loader3{
border: 10px solid #d9d9d9; /* Light grey */
border-top: 10px solid #ff3300; /* Blue */
border-left: 10px solid #ffb3ff;
border-right: 10px solid #ff6666;
border-bottom: 10px solid #1a1aff;/* Blue */
border-radius: 50%;
width: 140px;
height: 140px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Same as above but we are adding each border property in the subsequent loader with a different color so we can understand its spinning behavior and for beautification.
See the Pen Html loader 2 by Ankit kumar (@Kumar-Ankit56) on CodePen.
As we have seen the basics of loader how we can design loader. So, it’s time to learn its use in time Delays and loads a page.
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
You must be thinking what is this, So this half complete code. Like if you are planning for some logic events in your projects then your Javascript code must interact with the HTML files this is what we called Dom manipulation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML LOADER</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style=" display:none;" id=" my">
<img src="http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg" width="100%" height="100%"
</div>
</div>
</body>
</html>
The logic behind Javascript code:
#loader {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height: 120px;
border-radius: 50%;
border: 16px solid #f2f2f2;
margin: -76px 0 0 -76px;
border-top: 16px solid #ff3300;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#myDiv {
display: none;
text-align: centre;
}
HTML, body{
height: 100%;
}
Finally, we have completed
How to execute sir