Customizable jQuery Page Loader Plugin - Page Loading

File Size: 3.88 KB
Views Total: 5222
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable jQuery Page Loader Plugin - Page Loading

Page Loading is a tiny jQuery plugin that displays a highly configurable loading overlay with a progress bar covering the whole screen until the pages loads completely.

How to use it:

1. Import the jquery.pageLoading.css stylesheet for default page loader styles.

<link href="jquery.pageLoading.css" rel="stylesheet">

2. Load jQuery library and the jquery.pageLoading.js script at the end of the document.

<script src="//"></script>
<script src="jquery.pageLoading.js"></script>

3. Enable the page loader with default settings.

    /* OPTIONS HERE */

4. Configuration options.


  // background color of the progress bar

  // top position of the progress bar

  // top position of the percentage text

  // background color of the loading overlay
  backColor:'rgba(245, 245, 245, 0.90)',

  // background color of the progress bar

  // text inside the progress bar
  text:'Loading <b>{process} %</b>',

  // show of hide the percentage text


Change log:


  • Update jquery.pageLoading.css

This awesome jQuery plugin is developed by ertaserdi. For more Advanced Usages, please check the demo page or visit the official website.