jQuery Progress timer is a jquery extension that extends the functionality of the Bootstrap progress bar component
- REQUIRES Bootstrap 3.2.0 or greater.
Table of contents
Quick start
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
What's included
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 Simple Example
<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>
