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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.pageLoading.js"></script>

3. Enable the page loader with default settings.

pageLoading({
    /* OPTIONS HERE */
});

4. Configuration options.

pageLoading({

  // background color of the progress bar
  barColor:'#79c4df',

  // top position of the progress bar
  barTop:'100px',

  // top position of the percentage text
  textTop:'200px', 

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

  // background color of the progress bar
  backBarColor:'#dfe8ea', 

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

  // show of hide the percentage text
  textVisible:true, 

  loadOut:true  
  
});

Change log:

2015-07-09

• 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.