This time I will share jQuery Plugin and tutorial about Add Loading Screens To Your Web App – docuLoad, hope it will help you in programming stack.
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.
2. Create an element for the loading screen.
1 |
<div class="loading-screen"></div> |
3. Add jQuery library and the jQuery docuLoad plugin’s script to the webpage.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<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.
12 |
transform: translateY(5%); |
13 |
transition: all ease 1.2s; |
17 |
.loading .loading-screen { |
18 |
transform: translateX(0%); |
22 |
transition: all ease 200ms; |
6. If you want to override the default loading class.
2 |
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!
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.
This awesome jQuery plugin is developed by NatemcM. For more Advanced Usages, please check the demo page or visit the official website.
