Visual Page Preloader In jQuery - Percent-Preloader
File Size: | 5.65 KB |
---|---|
Views Total: | 3476 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

There's nothing more frustrating than waiting for a page to load when you click a link in a site you love and admire. If the page isn't interactive in the first few seconds of loading, a user might think that the site is slow. This is a minor plugin but it's purpose is to serve the needs of tinkerers looking to improve the performance of their sites and those otherwise interested.
Percent-Preloader is a simple, lightweight jQuery plugin that displays the loading progress of the current page in percentage. It provides a user-friendly visual page preloading experience until all assets above the fold are fully loaded and the page is interacitve. Designed to be small enough that it's not a big performance hit in production (only adds ~1kb to your site).
How to use it:
1. Include the jQuery Percent-Preloader plugin's JavaScript and CSS files on the page.
<link rel="stylesheet" href="/path/to/percent-preloader.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/percent-preloader.min.js"></script>
2. Create the HTML for the page preloader. That's it.
<div class="preloader"> <div class="inner"> <span class="percentage"><span id="percentage">15</span>%</span> </div> <div class="loader-progress" id="loader-progress"> </div> </div>
This awesome jQuery plugin is developed by jdmdigital. For more Advanced Usages, please check the demo page or visit the official website.