|File Size:||5.65 KB|
|Official Website:||Go to website|
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:
<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>