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