How to Add CSS Preloader to Your Website?

Pre-loader is one of the must-have features that you should add to your site. It makes your site load smooth and makes it more user-friendly. Especially when you have a lot of images and JavaScript files and your site load unlovely. This tutorial will teach you to step by step how to add CSS preloader to your site.

What’s Preloader?

If you still don’t know what preloader is! It’s just a simple animated image or icon or a svg vector that shows on your site before your site completely load. You might have seen many examples before and here is how it looks

[codepen_embed height=”320″ theme_id=”0″ slug_hash=”JkhDK” default_tab=”result” user=”viduthalai1947″]See the Pen <a href=’http://codepen.io/viduthalai1947/pen/JkhDK/’>Pure CSS Loaders kit</a> by Viduthalai Mani (<a href=’http://codepen.io/viduthalai1947′>@viduthalai1947</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

How to Add CSS Preloader to Your Site?

Now is the time to learn how to create and add a preloader to our website. There are many ways that you can create a preloader. For instance, a preloader can be an image; it can be an icon; it can be an SVG vector or a CSS created icon. When you use an image, it will load a little slower, and we recommend you to use SVG or CSS preloaders. So, in this tutorial, we will use CSS preloader.

@tobiasahlin have created a collection of animated preloader with css that you use in your project. You can find the github repository here. 

Step 1

Let’s start by creating the HMTL markup. Here is simple HTML markup.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qrjezg” default_tab=”html” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/qrjezg/’>Simple CSS Preloader</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Step 2

Create a separate file for your CSS or add the style tag in the header. We will use one of the Tobias ah lin’s CSS preloader. Once you learn how to use one, you will be able to use other preloaders as well.

#preloader {
     position: fixed;
     left: 0;
     top: 0;
     z-index: 9999;
     width: 100%;
     height: 100%;
     overflow: visible;
     background: #e91e63;
     display: flex;
     justify-content: center;
     align-items: center;
 }

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Step 3

Finally, add the JavaScript code. This code will hide the preloader whenever everything in your site load. We will use jQuery to detect if the document is loaded completely.

 $(document).ready(function($) {
        // hide preloader when everthing in the document load
        $('#preloader').css('display', 'none');
 });

Final Step

Now let’s put all of them together and see how it looks. We have created a pin on codepen.io that you can use.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qrjezg” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/qrjezg/’>Simple CSS Preloader</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

It look’s so fast if you have a fast internet connection. But I will work just fine in your site with contents. 

Conclusion

I hope it has been informative for you. If you have any questions regarding how to add CSS preloader, feel free to ask it bellow in the comments. 🙂