Implement an Animated Preloader using CSS and jQuery

The blank white screen works fine when waiting for a page to load in the browser, but would it be better to at least add some kind of indicator like an animated preloader to tell the visitor that something is happening?

Research has also shown that the feeling of waiting can be reduced by keeping a user’s attention occupied. With that said, let’s get started on implementing it using CSS and jQuery.

But before that, you should first choose an animated graphic to display. You can find a variety of animated graphics at loading.io. In this example, I’ll be using this one in SVG format.

HTML Markup

Add the following HTML markup just after the opening <body> tag:

<div id="preloader"></div>

Next is…

CSS Styling

Add the following CSS code:

#preloader {
  position: fixed; 
  left: 0; 
  top: 0; 
  z-index: 999; 
  width: 100%; 
  height: 100%; 
  overflow: visible; 
  background: #fff url("images/preloader.svg") no-repeat center center; 
}

which basically positions the animated graphic to the center of the screen.

Lastly…

jQuery Implementation

Add the following jQuery code:

$(window).on('load', function() {
  $('#preloader').delay(100).fadeOut('slow', function() {
    $(this).remove();
  });
});

which waits for the window object to be loaded before removing the preloader from the DOM in a smooth manner.

Written on November 5, 2017