Get a Preloader on Your Site with jQuery

Get a Preloader on Your Site with jQuery

Written by Wael Manai on Nov 28th, 2018 ・ Views ・ Report Post

Wael Manai Visit User Profile
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.


STEP ONE: HTML

In your HTML markup, directly underneath your <body> 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.


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.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Comments (0)