CSS Preloader

In our last article we have listed the best css preloader kits to use as loading animations for website. In this article let’s know how to add a css preloader to your website. We assume that you have the basic knowledge of html, css and jQuery.

We will be adding the first css preloader animation from Spinkit. Here is a step by step guide to add css preloader to your website!

What Now?

Open your website’s index.html and add the following html code just below the body tag

<div class="spinner-wrapper">
 <div class="spinner"></div>
    </div>

Add the following spinner-wrapper css code in your stylesheet.

.spinner-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ff6347;
 z-index: 999999;
 }

Now let’s add the jQuery code to make the spinner work, add the following jQuery code

$(document).ready(function() {
 //Preloader
 preloaderFadeOutTime = 500;
 function hidePreloader() {
 var preloader = $('.spinner-wrapper');
 preloader.fadeOut(preloaderFadeOutTime);
}
 hidePreloader();
});

💡 That’s it, we have added the css preloader to index.html.