Windows Preloader using HTML & CSS

13
Windows Preloader using HTML & CSS

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]

To create this program (Windows Preloader or Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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.

Previous articleOwl-carousel Cards Slider in HTML CSS & jQuery
Next articleProfile Card with Hover Animation in HTML CSS & JavaScript

13 COMMENTS

  1. Nice job! I’m from Uzbekistan.
    Menga katta yordam berdi Windows UI ni qurishimda, O’zbeklar bo’lsa bu saytni qo’llab quvvatlaylik.

LEAVE A REPLY

Please enter your comment!
Please enter your name here