Hello readers, Today in this blog you’ll learn how to create Windows Preloader using only HTML & CSS. Earlier I have shared two blog posts on how to create Loading Animation or Loader but one of my viewers requested me to create Windows Loader. So now it’s time to create this program (Windows Preloader or Loader).
What is a preloader? Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page’s content is still loading. Loader helps to entertain the visitors or content’s viewers while the rest pages are still loading. And preloaders help to maintain the bounce rate of the website.
As you have seen in the Windows Screen while you switch on the PC/Laptop there is shown rotating dots or loader with “please wait” text and while the loader is rotating after a few seconds, those dots are disappeared for few seconds, and again appear.
In this program, this loader is the same as the windows starting loader which rotates clockwise infinitely. When this loader at 76% to 100%, these loader dots are disappeared and again these dots appear when the loader is at 40%.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Windows Preloader or Loader).
Video Tutorial of Windows Preloader or Loader
If you’re a beginner and you know HTML & CSS then you can also create this type of Preloader or Loader program and use it on your websites and projects. As I’ve already told you why preloader is important to maintain the bounce rate of the website and entertain the content viewers.
If you like this program (Windows Preloader or Loader) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
Windows Loader or Preloader [Source Codes]
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Windows Loader | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
<div class="loader">
<div class="dot"></div>
</div>
</div>
<div class="text">
Please wait
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background: #0079d7;
}
.container{
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.wrapper{
position: absolute;
top: -35px;
transform: scale(1.5);
}
.loader{
height: 25px;
width: 1px;
position: absolute;
animation: rotate 3.5s linear infinite;
}
.loader .dot{
top: 30px;
height: 7px;
width: 7px;
background: #fff;
border-radius: 50%;
position: relative;
}
.text{
position: absolute;
bottom: -85px;
font-size: 25px;
font-weight: 400;
font-family: 'Poppins',sans-serif;
color: #fff;
}
@keyframes rotate {
30%{
transform: rotate(220deg);
}
40%{
transform: rotate(450deg);
opacity: 1;
}
75%{
transform: rotate(720deg);
opacity: 1;
}
76%{
opacity: 0;
}
100%{
opacity: 0;
transform: rotate(0deg);
}
}
.loader:nth-child(1){
animation-delay: 0.15s;
}
.loader:nth-child(2){
animation-delay: 0.3s;
}
.loader:nth-child(3){
animation-delay: 0.45s;
}
.loader:nth-child(4){
animation-delay: 0.6s;
}
.loader:nth-child(5){
animation-delay: 0.75s;
}
.loader:nth-child(6){
animation-delay: 0.9s;
}
That’s all, now you’ve successfully created a Windows Preloader using HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
