Hi Users, Today in this blog you'll figure out how to make Windows Loader utilizing just HTML and CSS. Prior I have shared two blog entries on the most proficient method to make Loading Animation or Loader yet one of my watchers mentioned me to make Windows Loader. So presently it's an ideal opportunity to make this program (Windows Preloader or Loader). 

Lets See How Our Loader Look Like :



What is a preloader? Preloaders (otherwise called loaders) are what you see on the website page screen while the remainder of the page's substance is as yet stacking. Loader assists with engaging the guests or content's watchers while the rest pages are as yet stacking. Furthermore, preloaders help to keep up with the bob pace of the site. 

As you have found in the Windows Screen while you switch on the PC/Laptop there is shown turning spots or loader with "if it's not too much trouble, stand by" text and keeping in mind that the loader is pivoting following a couple of moments, those dabs are vanished for few moments, and again show up. 

In this program, this loader is equivalent to the windows beginning loader which turns clockwise vastly. At the point when this loader at 76% to 100%, these loader dabs are disppeared and again these spots seem when the loader is at 40%.

 Source Code 👇👇👇

HTML File ( save as index.html )


<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      <title>Windows Loader</title>
   </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>


CSS File ( save as style.css )


@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;
}


Or,

Click here to get the source code Files


----------------------------------------------------------------------------------------------------------------------------