fogLoader

Ajax loader for jQuery utilizing themes

Download .zip Download .tar.gz View on GitHub

fogLoader is an easy to use modal ajax loader that works with your existing jQuery theme

You will need a reference to jQuery 1.10.2 and jQueryUI 1.10.4, plus your theme. jQueryUI 1.10.3 will work however not all progress bar functions will be supported.

Add a div prefereably at the top of your HTML page. Instantiate fogLoader inside an event
<div id="myLoader"></div>

Demo

Theme


$('#myLoader').fogLoader();

$('#myloader').fogLoader({
  message: 'Please Wait',
  width: 170 // override the default width if your text is long
});

$('#myLoader').fogLoader({
  animated: true
});
$('#myLoader').fogLoader({
  message: 'Working',
  width: 150,
  animated: true
});
$('#myLoader').fogLoader({
  spell: true
});
$('#myLoader').fogLoader({
  animated: true,
  spell: true,
  message: 'Working'
});

$('#myLoader').fogLoader({
  style: 'progressbar'
});
// this could also be put inside an ajax callback
myintervalid = setInterval(function() {
  $('#myLoader').fogLoader('updateProgress', {value: myprogresscounter});
  myprogresscounter++;
  if($('#myLoader').fogLoader('progressValue') > 100){
    $('#myLoader').fogLoader('close');
    clearInterval(myintervalid);
    myprogresscounter = 1;
    }
}, 50);

$('#myLoader').fogLoader({
  style: 'progressbar',
  progress: {message: 'Saving item' + myprogresscounter + ' to the cloud', loc: $('#MessagePosition option:selected').val()}
});
// this could also be put inside an ajax callback
myintervalid = setInterval(function() {
  $('#myLoader').fogLoader('updateProgress',
  {
    value:myprogresscounter,
    msg: 'Saving item'+myprogresscounter+ ' to the cloud'
  });
  myprogresscounter++;
  if($('#myLoader').fogLoader('progressValue') > 100){
    $('#myLoader').fogLoader('close');
    clearInterval(myintervalid);
    myprogresscounter = 1;
    }
}, 50);

* note this only works with jQueryUI 1.10.4 
$('#myLoader').fogLoader({
  style: 'progressbar',
  progress: {message: 'myprogresscounter + '%'}
});
// this could also be put inside an ajax callback
myintervalid = setInterval(function() {
  $('#myLoader').fogLoader('updateProgress',
  {
    value:myprogresscounter,
    msg: myprogresscounter + '%'
  });
  myprogresscounter++;
  if($('#myLoader').fogLoader('progressValue') > 100){
    $('#myLoader').fogLoader('close');
    clearInterval(myintervalid);
    myprogresscounter = 1;
    }
}, 50);

$('#myLoader').fogLoader({
  style: 'progressbar',
  progress: {value: false} // set the progressValue to false.
  //Same as the jQueryUI progressbar for indetermenate bars
});