Indicator plug-in is in version 1.0 which is really simple and useful.
First you must add scripts between head tags.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
and then JQuery Indicator
<script type="text/javascript">// <![CDATA[
/* File Created: October 4, 2012 Author: CagdaşsErman AFACAN Web: http://www.codemein.net Plug-in Name: Infdicator Description: This plugin is used to show and hide loader image when you do mouse request that you decide. */ (function ($) { $.fn.indicator = function (options) { // Create some defaults, extending them with any options that were provided var settings = $.extend({ 'path': '', 'width': '20px', 'height': '20px', 'callBack': function () {} }, options), loaderObj = settings.path.length > 0 ? $("<img id='loader' src='" + settings.path + "' style='width:" + settings.width + "; height:" + settings.height + ";' alt='loader' />") : $("<span id='loader'>Loading...<span/>");
return this.each(function () {
var obj = $(this);
if (obj.attr('type') !== "checkbox") {
// Click event binding
obj.bind('click', function () {
obj.after(loaderObj);
obj.attr("disabled", "true");
debugger;
if (typeof (settings.callBack) === "function") {
settings.callBack();
}
});
} else if (obj[0].nodeName === "INPUT" && obj.attr('type') === "checkbox") {
// Click event binding
obj.bind('change', function () {
obj.after(loaderObj);
obj.attr("disabled", "true");
debugger;
if (typeof (settings.callBack) === "function") {
settings.callBack();
}
});
}
});
};
})(jQuery);
//This is the function can be called after your job done to clean indicator from UI. Feel free to change selector (.pirpir) with yours.
function cleanIndicator() {
var loaders = $("img#loader , span#loader");
loaders.remove();
$(".pirpir").removeAttr("disabled");
};
// ]]></script>
Now all you need to do is activate Indicator plug-in with code below.
For an example I requested Twitter api to get my (@Climberman) tweet dates
//HOW TO USE IT
$(".pirpir").indicator({
'path': 'http://www.loadinfo.net/images/preview/33_ball_two_24.gif?1200916238',
'callBack': function () {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: "climberman",
include_rts: true,
count: 10,
include_entities: true
},
success: function(data, textStatus, xhr) {
debugger;
var i=0;
for(; i < data.length; i++ ){
$('#result').append(data[i].created_at + "<br/>");
}
}
}).done(function(){cleanIndicator()});
}
});
Without callback param it looks more simple then previous.
$(".pirpir").indicator({
'path': 'http://www.loadinfo.net/images/preview/33_ball_two_24.gif?1200916238', /*Path is the indicator img link*/
});
Anyway you can use the Indicator plugin as you wish. I also give
DEMO
on JsFiddle