jQuery Animated Loading Indication Plugin - Waiting

jQuery Waiting is a jQuery plugin that allows to add and remove a loading indication (e.g. an AJAX spinner gif) with some useful options like positioning and adding it as an overlay inside the element or over the entire page.

Getting Started:

1. Include waiting.css on the web page

<link rel="stylesheet" type="text/css" href="waiting.css">

2. Include jQuery library and jQuery Waiting plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.waiting.js"></script>

Usages:

1. A loading spinner positioned absolute, centered and with an overlay.

$('#demo-basic .content').waiting();

2. You can position the indicator/spinner by setting position to one of the following values:

// You can position the indicator/spinner by setting position to one of the following values:
// 'center',
// 'top left', 'top center', 'top right',
// 'center left', 'center right',
// 'bottom left', 'bottom center' or 'bottom right'
// If you don't want to use the predefined CSS classes you can set position to 'custom',
// in that case you have to take care of the CSS yourself.

$('#demo-position .content').waiting({ position: 'top left' });

3. You can simply append the indicator by setting overlay to false.

$('#demo-overlay-false .content').waiting({ overlay: false });

4. By setting fixed to true you can expand the overlay over the whole page.

$('#demo-overlay-false .content').waiting({ fixed: true });

---

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