Simple preloader with Html and CSS

In this post we’re going to create preloader for your website.

Preloader is used to show some animation or text before your whole website become ready. I know, you already have seen many websites where you see an animation going on the middle of the page till the whole page get loads properly for the first time or whenever you refresh the page. Then you see that animation on the middle of the page disappears. So that is called the Preloader.

Preview

This is the result, you will get at the end.

Html

Just add this html in your page wherever you want but we suggest this to keep just after opening the body tag.

<div class="main-loader">
  <span class="loader1"></span>
  <span class="loader2"></span>
  <span class="loader3"></span>
</div>

Css

Now add this css into your css file and see the preview.

body{
     background:#111a28 
}

@-webkit-keyframes pulse {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0.2, 0.2, 0.2);
         transform: scale3d(0.2, 0.2, 0.2);
    }
}
 @keyframes pulse {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0.2, 0.2, 0.2);
         transform: scale3d(0.2, 0.2, 0.2);
    }
}
 @-webkit-keyframes pulse2 {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0, 0, 0);
         transform: scale3d(0, 0, 0);
    }
}
 @keyframes pulse2 {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0, 0, 0);
         transform: scale3d(0, 0, 0);
    }
     100% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
}
 @-webkit-keyframes pulse3 {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0, 0, 0);
         transform: scale3d(0, 0, 0);
    }
     90% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
}
 @keyframes pulse3 {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
     50% {
         -webkit-transform: scale3d(0, 0, 0);
         transform: scale3d(0, 0, 0);
    }
     90% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
    }
}
 .main-loader{
    position: fixed;
    left:50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
}
 .loader1{
   width: 20px;
   height: 20px;
   background-color: #fff;
   border-radius: 50%;
   float: left;
   z-index: 9;
   position: absolute;
   left: 20px;
   top: 20px;
   -webkit-animation-name: pulse;
   animation-name: pulse;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   transform-origin: center;
   animation-delay: 0s;
   transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
 .loader2{
   width: 40px;
   height: 40px;
   background-color: #fff;
   border-radius: 50%;
   float: left;
   z-index: 8;
   opacity: 0.7;
   position: absolute;
   left: 10px;
   top: 10px;
   -webkit-animation-name: pulse2;
   animation-name: pulse2;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-delay: 0.3s;
   transform-origin: center;
   transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
 .loader3{
   width: 60px;
   height: 60px;
   background-color: #fff;
   border-radius: 50%;
   float: left;
   z-index: 7;
   opacity: 0.4;
   position: absolute;
   left: 0;
   top: 0;
   -webkit-animation-name: pulse3;
   animation-name: pulse3;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-delay: 0.5s;
   transform-origin: center;
   transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
 

You have added the html and css and you must see the preview in your website when you visit your website in browser. Now you can use the jQuery to check if the page 100% loaded, so that you can remove the preloader and your visitor can see the website. To do so, just add this jQuery script

jQuery

$(window).load(function(){
  $(".main-loader").fadeOut();
});

Video

We have created detail video for this that will show your everything step by step.

Preview

This is the result, you will get at the end.

I hope you like this post, if you have any query, please write in comment.