Easy jQuery Progress Bar Timer Plugin For Bootstrap 3 - progressTimer
File Size: | 5.56KB |
---|---|
Views Total: | 40630 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

progressTimer is an easy-to-use jQuery plugin which makes use of Bootstrap 3 progress bar component to create an animated progress timer with CSS3 transitions and striped effects. The plugin comes with a simple onFinish()
callback that allows you to do something once the timer has expired.
Basic Usage:
1. Include required Twitter's Bootstrap 3 framework on your web page.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
2. Include the latest jQuery javascript library and jQuery progressTimer on your web page.
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="js/jquery.progressTimer.js"></script>
3. Create a container for the progress bar timer.
<div id="progressTimer"></div>
4. The javascript.
$("#progressTimer").progressTimer({ timeLimit: 120, warningThreshold: 10, baseStyle: 'progress-bar-warning', warningStyle: 'progress-bar-danger', completeStyle: 'progress-bar-info', onFinish: function() { console.log("I'm done"); } });
This awesome jQuery plugin is developed by nathanhoneycutt. For more Advanced Usages, please check the demo page or visit the official website.