Visual Page Preloader In jQuery - Percent-Preloader

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.