AJAX Page Loader Plugin With jQuery - timed-page-loader.js

File Size: 16.9 KB
Views Total: 4370
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
AJAX Page Loader Plugin With jQuery - timed-page-loader.js

The timed-page-loader.js jQuery plugin helps you create a horizontal/vertical loading bar that indicates the remaining time when you document automatically loads the next page via AJAX requests.

How to use it:

1. Add the 'timed_page_loader.css' and 'timed_page_loader.js' along with the jQuery library to your HTML document.

<link href="css/timed_page_loader.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.timed-page-loader.js"></script>

2. Create a container element to show the pages loaded via AJAX requests.

<div id="demo-1" class="page-wrap"></div>

3. Create a new AJAX page loader and specify the first page you want to load.

$("#demo-1").timedPageLoader({
  firstPage: 'page1.html', // the first page
});

4. Set the interval between page loads in milliseconds.

$("#demo-1").timedPageLoader({
  firstPage: 'page1.html',
  fuseTime: 10000
});

5. Change the direction of the ajax page loader to 'Vertical':

$("#demo-1").timedPageLoader({
  firstPage: 'page1.html',
  fuseTime: 10000,
  direction: 'vertical'
});

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