Auto Ajax Loader Indicator Plugin for jQuery

Automatically tracks all ajax requests and displays indicator according to your settings

Compatible with: jQuery 1.7+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

Features

Download
Single plugin to indication all ajax request $.ajax, $.get, $.post, $.load, ....
  • Default global style

  • Loading...

    Loading...
    ALT NAME
    Custom templates

  • Use HTML5 DATA attributes

    Get example

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae lorem id ipsum auctor condimentum. Nulla aliquet, est pretium venenatis ultrices, elit neque volutpat felis, ac ullamcorper nibh sem euismod massa. Etiam a ullamcorper est. Integer et accumsan mi. Nulla ultrices congue tortor et sagittis. Fusce hendrerit eleifend diam, sit amet fermentum quam. Nunc tincidunt, neque pellentesque rutrum mollis, tellus arcu porta lorem, vitae commodo massa eros sed.
    Masked

  • 1 2 3 4 5
    Selectors

    $(selector) .ai({})

How to install

AjaxIndicator ( $.ai() ) is a jQuery plugin, meaning that it extends the jQuery JavaScript library to include extra functionality. In your HTML document, you must include the jQuery library's source before you include the source of any jQuery plugin. ai has the additional requirement that you include its stylesheet in the of your document before you include the source of the plugin. Here is an example HTML5 document with the required files:

<!DOCTYPE html>
<html>
    <head>
        <title>Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Ajax indicator include after jquery -->
        <script src="js/ajax-indicator.min.js"></script>
        <!-- Other script -->
    </body>
</html>

Append to you CSS

<style type="text/css">
    #atpl .overlay { 
        z-index: 1000; position:fixed; top:0; left:0;background-color: #9da0a4; opacity: 0.2;
        /* height:100%; width:100%; */ /* uncomment to display overlay */    
    }
    #atpl span{display:block;position:fixed;right:4px;top:4px;color:#fff;padding:5px 10px;border-radius:5px;cursor:default;font-size:14px;z-index:20001;background:#c71d72}
    #atpl span.imgLoader{padding:5px 11px 5px 30px;background:url(/img/ajax-loader.gif) 10% 50% no-repeat #c71d72}
    /*
    * MASK 
    * If you are using a mask then add these styles
    */
    .aimask{z-index:100;position:absolute;top:0;left:0;-moz-opacity:.5;opacity:.50;filter:alpha(opacity=50);background-color:#CCC;width:100%;height:100%;zoom:1}
    .aimask-msg{display: none; font-size:14px;z-index:10001;position:absolute;background:#c71d72;color:#fff;padding:5px 5px;border-radius:5px;cursor:default}
    .aimasked{overflow:hidden !important}
    .aimasked-relative{position:relative !important}
</style>

Settings

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-id-tpl="".
Name type default description
template string | function The default template is included in the plugin code. It is fully customizable via CSS.
<div id="atpl">
    <div class="overlay"></div>
    <span id="aiMsg" class="imgLoader"> 
        Loading...
    </span>
</div>
idTpl string | function atpl ID template indicator.
idMsg string | function aiMsg The ID of the container template to display messages or images loader. May be equal idTpl
aiMask bool | string | function false ID element to which you want to put a mask
aiMaskmsg bool | string | function false Content information field mask. For example "Loading ..."
aiDisable bool undefined Add aiDisable to params for disable indication.
For data attributes, append the option name to data-, as in data-ai-disable. Or add to params request {aiDisable:1}
$post, $get, $load, $.ajax or other ajax method
<script>
    $('#' + id).load('/ajax.php', {
        params1: true,
        params2: false,
        aiDisable: 1 // aiDisable : 0 = equivalent
    }, function(data) {
        alert('ok')
    });
</script>
displayError int 1000 If at the time of the request, it will display an error. The value sets the number of milliseconds during which the error is displayed. 1000 ms = 1 second. Set to 0 to disable it.

Public Methods

Heads up! Options for individual AjaxIndicator can alternatively be specified through the use of data attributes. Parameter options - optional. Options if you use several different indications on the page
$.ai.getMsg(options) Get the content of the loader.
$.ai.setMsg(options) Sets the text messages in the loader
$.ai.show(options) Show loader
$.ai.hide(options) Hide loader
$.ai.mask(options) Overlay mask on the element $.ai.mask({aiMask:idElementToMAsk, aiMaskmsg: 'Loading...'})
$.ai.unmask(options) Removes the mask from the element $.ai.unmask({aiMask:idElementToMAsk})
$.ai.on() Enable global indications
$.ai.off() Removes all traces of AjaxIndicator from the document.

A simple plugin to automatically display aJax requests using jQuery with highly configurable. In the code of your script you don't need any more support indication to the user requests. The plugin will do everything himself!