Posts Tagged ‘ loader ’

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){
if((loadCounter%(noOfLoaderDots+1))==0){
loadStrSuffix = '';
loadCounter++;
}else{
loadStrSuffix += '.';
loadCounter++;
}
$('#'+id).text('Loading'+loadStrSuffix);
}
</script>

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………….