jQuery Progress timer is a jquery extension that extends the functionality of the Bootstrap progress bar component
- REQUIRES Bootstrap 3.2.0 or greater.
Three quick start options are available:
- Clone the repo:
git clone https://github.com/tnory56/jquery-progressTimer.git
. - Install with Bower:
bower install jquery-progresstimer
. - See the demo page Demo for usage and possibilities
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
jquery-progresstimer/
├── demo/
│ ├── css/
│ │ ├── static.css
│ │ └── static.min.css
│ ├── fonts/
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ └── glyphicons-halflings-regular.woff
│ ├── js/
│ │ ├── static.js
│ │ └── static.min.js
│ ├── demo.css
│ └── index.html
├── dist/
│ ├── css/
│ │ └── jquery.progresstimer.css
│ └── js/
│ ├── jquery.progresstimer.js
│ └── jquery.progresstimer.min.js
├── src/
│ ├── css/
│ └── js/
├── bower.json
├── Gruntfile.js
├── LICENSE
├── package.json
└── README.md
<div class="container">
<div class="loading-progress"></div>
</div>
<script src="js/static.min.js"></script>
<script src="../dist/js/jquery.progresstimer.js"></script>
<script>
var progress = $(".loading-progress").progressTimer({
timeLimit: 10,
onFinish: function () {
alert('completed!');
}
});
$.ajax({
url:"http://localhost/"
}).error(function(){
progress.progressTimer('error', {
errorText:'ERROR!',
onFinish:function(){
alert('There was an error processing your information!');
}
});
}).done(function(){
progress.progressTimer('complete');
});
</script>