The plugin adds a loading class to the body when the page stars loading, sets a timeout function so the loading screen has time to appear ideal for use with animations/ fading out the page etc, and removes the loading class when your page has fully loaded.

How to use it:

1. Add the loading class to the body tag.

<body class="loading">

2. Create an element for the loading screen.

<div class="loading-screen"></div>

3. Add jQuery library and the jQuery docuLoad plugin's script to the webpage.

7. Set the timeout in milliseconds. DO NOT SET THIS RIDICULOUSLY HIGH!! Remember less is more, people do not want to wait 5 seconds just to see your animation before being sent to the next page!

$('a').docuLoad({
timeOut: 240
});

8. By default, the plugin will wait for all images and JS to load before firing and can take a long time. So you may want to set windowLoad to false to trigger on document ready for a speedier response.

$('a').docuLoad({
windowLoad: false
});

This awesome jQuery plugin is developed by NatemcM. For more Advanced Usages, please check the demo page or visit the official website.