Javascript Loader String using JQuery

For javascript loader string —
1> first add the jquery library

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

2> Add the following loader script —-

<script type="text/javascript">
var loadCounter = 0;                        //counter of dots
var loadStrSuffix = "";                     //set the initial dosts to null
var noOfLoaderDots = 5;                     //no of dost will shown on loader string
var miliSecondsToUpdateLoaderDots = 800;    //update time of loader string in miliseconds
var sivar;                                  //sivar is use as the carrier of set interval function
* function : enableLoader is used for enabling the loader
* args:
*  id- is the id of updated string location
var enableLoader = function(id){
$('#'+id).css('display', 'block');
sivar = setInterval("updateLoaderStr('"+id+"')",miliSecondsToUpdateLoaderDots); // call 'updateLoaderStr()' function on every 'miliSecondsToUpdateLoaderDots' miliseconds and store this call into a variable sivar';
* function : disableLoader is used for disabling the loader
* args:
*  id- is the id of updated string location
var disableLoader = function (id){
$('#'+id).css('display', 'none');   //block the display of loader string
clearInterval(sivar);               //unset the call of set interval
* function : updateLoaderStr is used for updating string
* args:
*  id- is the id of updated string location
var updateLoaderStr = function(id){
loadStrSuffix = '';
loadStrSuffix += '.';

3>then call this loader whenever you need. you may use different event here i used onclick event of button ————

<input type="button" value="enable" onclick="enableLoader('my_loader_id');">
<input type="button" value="disable" onclick="disableLoader('my_loader_id')">
<span id="my_loader_id" style="display:none">Loading...</span>

Thats it………….

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: