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 to generate your own custom preloader.


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

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


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.


In your JavaScript file, add the following code:

$(window).load(function() {
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.


or Sign Up

Sign Up

or Login
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!