Add Loading Screens To Your Web App - docuLoad
File Size: | 2.51 MB |
---|---|
Views Total: | 1257 |
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.