How to Add CSS Preloader to Your Website [Tutorial]

Shrinivas
6 February 2016
31 Comments



LinkedIn0
Pinterest0

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>

 

  • Go to spinkit website, choose the first spinner and click on “Source”
  • 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.
  • 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;
}
  • 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

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

31 comments on “How to Add CSS Preloader to Your Website [Tutorial]”

  5. 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 🙂

    Reply

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

    Reply

  8. for those using wordpress. you will need to replace all the dollar $ with “jQuery” (without the quotemarks)

    Reply

      1. Hi what if i juts want it to be on my homepage? should i write all my pages name except the homepage?
        what code and where should i put it? sorry for the noob question. Thanks in advance! 😀

        Reply

        1. Hi, for HTML template – just add the jQuery and CSS code in home.html or index.html to show preloader only on the homepage, for WordPress-add the code in index.php or home.php depending the theme structure. (Be sure to add the code in child theme)

          Reply

  11. Thanks for the great tutorial! is there any way i customize it by my own? perhaps adding my website logo?

    Reply

    1. We are glad it helped you, you can add your website logo instead of spinner, change the ‘spinner’ class as logo (but use the same CSS) and add the image tag inside the div to add your own logo.

      Reply

  12. If anyone is still having issues with it never fading out, make these changes:

    $(window).load(function()

    to

    $(window).on(‘load’, function()

    Event aliases like ‘.load’ has been deprecated since jQuery 1.8

    Reply

  13. i just post those thing as it is you asked to post..but perloader not working and the code which is i post is showing on web page not preloader … i work in notepad

    Reply

  17. I am using Sublime Text editor and the preloader is loading forever. Can anybody tell me any changes which I have to make with respect to subime text editor?

    Reply

    1. The code in this article hides the preloader automatically, you can use any code editor, just make sure there are no javascript errors on the page.

      Reply

Leave a Reply