Flashing Loading Indicator With Logo - jqloader
File Size: | 6.49 KB |
---|---|
Views Total: | 1952 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jqloader is a small and easy-to-style jQuery loader plugin that makes uses of CSS animations to create flashing icons and text for loading indicators.
How to use it:
1. Insert the jqloader plugin's files into the html page.
<link rel="stylesheet" href="/path/to/css/jqloader.css" /> <!-- Scripts --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jqloader.js"></script>
2. Initialize the loading indicator on a specific container.
<div id="target"> ... Content Will Be Loaded In Here ... </div>
$("#target").jloader();
3. Note that the target element must have the position: 'relative'
property. Elements without this property may have their loading indicators appear outside of their boundaries.
#target { display: block; position: relative; }
4. Show the loading indicator on the element when needed.
$("#target").jloader('show', 'Loading Text Here...');
5. Hide the loading indicator when the content has been completely loaded.
$("#target").jloader('hide');
6. Toggle the loading indicator.
$("#target").jloader('toggle');
7. Sometimes you might need an error messages when there is an error occured.
$("#target").jloader('error', "Woopsie.");
8. Don't forget to replace the loading icon (typically your site logo) with your owns.
.jloader .jloader-icon { background-image: url(https://www.jqueryscript.net/images/logo.png); background-repeat: no-repeat; height: 60px; width: 350px; text-align: center; }
9. Override the default styles of the loading overlay.
.jloader { background-color: rgba(52,152,219, 0.9); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; }
Changelog:
2019-12-03
- Updated position for text slightly
This awesome jQuery plugin is developed by ZWhit196. For more Advanced Usages, please check the demo page or visit the official website.