Add Loading Screens To Your Web App - docuLoad

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

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/docuLoad.js"></script>

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

$('a').docuLoad();

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.

$('a').docuLoad({
  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!

$('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.