Easy jQuery Progress Bar Timer Plugin For Bootstrap 3 - progressTimer

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

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.