Get a Preloader on Your Site, Fast (with jQuery)

These are two fantastic resources that I used to get started with web development and come highly recommended:
For beginners
For intermediates

Preloaders (a.k.a. loading animations) are animations that run between page-loads or as your site gathers information. The two most common types of preloaders are the ‘spinner’ or ‘status bar’. You’ve likely encountered thousands of these while surfing the web.

Check out loading.io to generate your own custom preloader.

Preloaders are essential on any professional website because they provide important feedback to the user, letting them know that their input was registered and that progress is being made. Without a preloader, especially on sites that take longer to load content, a user may conclude that the site has froze or crashed, and the user will likely leave the site 😱

Enough fluff, let’s get a preloader on your site!

STEP ONE: HTML

In your HTML markup, directly underneath your tag, add a div with the class of preloader.

<div class="preloader"></div>

STEP TWO: CSS

In your CSS, add the following code:

.preloader {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background-image: url('../images/default.gif');
   background-repeat: no-repeat; 
   background-color: #FFF;
   background-position: center;
}

The code above will place a preloader in the centre of a white screen.

The path of your background-image will likely be different than the one above. As well, make sure you use a .gif file, so that your preloader is animated. You can find animated preloaders on google images or make your own here.

STEP THREE: JQUERY

In your JavaScript file, add the following code:

$(window).load(function() {
   $('.preloader').fadeOut('slow');
});

The code above will display the preloader, on load. Once the page has fully loaded, the preloader screen will disappear and your site’s content will be displayed.

That’s all, folks!