Lightweight jQuery AJAX Loading Spinner Plugin - ajax-loading.js

Lightweight jQuery AJAX Loading Spinner Plugin - ajax-loading.js
File Size: 9.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ajax-loading.js is a simple, lightweight jQuery plugin that automatically listens for AJAX events and displays a GIF based loading spinner while waiting for AJAX content to be loaded.

How to use it:

1. Add jQuery library and the jQuery ajax-loading.js plugin to your web pages.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="ajax-loading.js"></script>

2. Initialize the plugin with default options.

var loading = $.loading();

3. Start an AJAX loading animation.

loading.open();

4. Start an AJAX loading animation that will auto dismiss after 3000ms.

loading.open(3000);

5. Close the AJAX loading animation manually.

loading.close();

6. Enable or disable listening for ajax events.

loading.ajax(true);//enable
loading.ajax(false);//disable

7. Full customization options.

ajax       : true,

// CSS id for the AJAX loading animation
id         : 'ajaxLoading',

// CSS z-inde
zIndex     : '1000',

// background color
background : 'rgba(0, 0, 0, 0.7)',

// minimum duration
minTime    : 200,

// CSS styles
radius     : '4px',
width      : '85px',
height     : '85px',

// loading spinner
imgPath    : 'ajax-loading.gif',
imgWidth   : '45px',
imgHeight  : '45px',

// loading text
tip        : 'loading...',
fontSize   : '14px',
fontColor  : '#fff'

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