Add Loading Screens To Your Web App - docuLoad

File Size: 2.51 MB
Views Total: 1234
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Add Loading Screens To Your Web App - docuLoad

docuLoad is a jQuery plugin which adds a customizable, CSS3 powered loading screen to your web app.

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.

<script src="" 
<script src="js/docuLoad.js"></script>

4. Call the function on the internal links within the document.


5. Customize the loading screen with the following CSS.

.loading-screen {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -9998;
  visibility: hidden;
  transform: translateY(5%);
  transition: all ease 1.2s;
  opacity: 0;

.loading .loading-screen {
  transform: translateX(0%);
  z-index: 9998;
  visibility: visible;
  opacity: 1;
  transition: all ease 200ms;

6. If you want to override the default loading class.

  bodyLoadClass: 'loading'

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!

  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.

  windowLoad: false

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