How to Add CSS Preloader to Your Website [Tutorial]


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.

In this tutorial we will add one of the CSS spinner from CSS Spinkit to your website. The CSS preloader will be showed on every page, until the webpage gets loaded fully if you have separate header and footer php files.

Also read:

How to Add CSS Preloader to Your Website

spinkit

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-

  1. Open your website’s index.html and add the following HTML code just below the body tag
    <!--CSS Spinner-->
    <div class="spinner-wrapper">
    <div class="spinner"></div>
    </div>
  2. Go to spinkit website, choose the first spinner and click on “Source”
  3. You can see the HTML and CSS code of the selected CSS spinner, we have already added HTML, so just copy the CSS and paste it in your website’s CSS stylesheet.
  4. We have added another wrapper div with “spinner-wrapper” class which covers the entire window to hide the loading elements. 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;
    }
    
  5. Now remove margin: 100px auto; from the “spinner” class and add the following CSS lines to the same “spinner” class
    position: absolute;
    top: 48%;
    left: 48%;
    

    This brings the spinner to center of the main wrapper div

  6. Now let’s add the jQuery code to make the spinner work, add the following jQuery code before the closing body tag of index.html
    <script>
    $(document).ready(function() {
    //Preloader
    $(window).load(function() {
    preloaderFadeOutTime = 500;
    function hidePreloader() {
    var preloader = $('.spinner-wrapper');
    preloader.fadeOut(preloaderFadeOutTime);
    }
    hidePreloader();
    });
    });
    </script>
    

That’s it, we have added the CSS preloader to index.html. If you have the separate header.php and footer.php then the preloader we have just added will be shown on every page until the page loads all the HTML elements. This preloader can be implemented on wordpress theme with the same procedure.



Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.


19 comments on “How to Add CSS Preloader to Your Website [Tutorial]
  1. This works perfectly! Thanks!! One thing, if your code has “use strict;”, you’ll need to add var to preloaderFadeOutTime = 500 otherwise preloaderFadeOutTime isn’t defined and never allows the page to show 🙂

  2. Having the same problem the preloader taking permanent residence! Have added var to preloaderFadeOutTime, checked scripts, wtc. Has anybody found a solution to this problem yet?

Leave a Reply