Ajax Progress Bar Plugin with jQuery and Bootstrap - progressTimer

progressTimer is a lightweight jQuery plugin for displaying a flexible timer bar to indicate the Ajax progress via Bootstrap progress bar component.

How to use it:

1. Include the necessary jQuery library & Twitter Bootstrap 3 framework into your web page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

2. Include the jQuery progressTimer plugin after jQuery library.

<script src="path/to/jquery.progresstimer.js"></script>

3. Create an empty container element to place the Bootstrap progress bar.

<div class="loading-progress"></div>

4. The sample Javascript to active a progress bar that indicate the loading progress of an Ajax request.

var progress = $(".loading-progress").progressTimer({
  timeLimit: 10,
  onFinish: function () {
  alert('completed!');
}
});
$.ajax({
   url:"CUSTOM URL HERE"
  }).error(function(){
  progress.progressTimer('error', {
  errorText:'ERROR!',
  onFinish:function(){
    alert('There was an error processing your information!');
  }
});
}).done(function(){
  progress.progressTimer('complete');
});

5. Available default settings.

//total number of seconds
timeLimit: 60,

//seconds remaining triggering switch to warning color
warningThreshold: 5,

//invoked once the timer expires
onFinish: function () {
},

//bootstrap progress bar style at the beginning of the timer
baseStyle: '',

//bootstrap progress bar style in the warning phase
warningStyle: 'progress-bar-danger',

//bootstrap progress bar style at completion of timer
completeStyle: 'progress-bar-success',

//show html on progress bar div area
showHtmlSpan: true,

//error text
errorText: 'ERROR!',

//set the success text when succes occurs
successText: "100%"

Change logs:

2015-06-09

• v1.0.5

2014-10-14

• added showHtmlSpan option removed showPercentage option.

2014-10-09

• added successText option.

---

This awesome jQuery plugin is developed by tnory56. For more Advanced Usages, please check the demo page or visit the official website.