bootstrap-progressbar
is a jQuery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.
-
include
bootstrap-progressbar.js
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
-
activate
bootstrap-progressbar
functionality on progressbars of your choice$(document).ready(function() { $('.progress .bar').progressbar(); });
-
set the
data
attribute and remove thewidth
style attribute (alternatively you can set it to 0)-
data-percentage
<div class="progress progress-info"> <div class="bar" data-percentage="75"></div> </div>
-
data-amount-part
anddata-amount-total
<div class="progress progress-info"> <div class="bar" data-amount-part="1337" data-amount-total="9000"></div> </div>
-
You can now trigger progressbar as much as you want. Just change your data
attribute and trigger .progressbar()
again. All settings made before will be kept. Please have a look at the demo page for a working example.
-
text and delay
simply add additional parameters when activating the script
$(document).ready(function() { $('.progress .bar').progressbar({ transition_delay: 300 , refresh_speed: 50 , display_text: 2 , use_percentage: true , border_radius: '4px' , update: doSomethingCool( current_percentage ) { .. } , done: doSomethingCool( ) { .. } , fail: doSomethingCool( error_message ) { .. } }); });
-
transition_delay
is the time in milliseconds until the animation starts -
refresh_speed
is the time in milliseconds which will elapse between every text refresh / callback call -
display_text
determines whether the text will be displayed0
no text (this mode doesn't change any css / html)1
text on filled bar (this mode doesn't change any css / html)2
text on center (this mode changes css / html due to styling requirements)
-
use_percentage
determines whether the text will be displayed in percent or amount -
border_radius
hook to change the border radius of the progressbar- you only have to set this if you are using centered text AND have overwritten the default bootstrap value
-
update
hook where you can grab the actual percentage value -
done
hook which indicates when progressbar is filled to the given value -
fail
hook where you can grab an error message when something went wrong
-
-
animation
to change the animation itself you have to overwrite either less or css
-
less
.progress .bar { .transition(width 2s ease-in-out); }
-
css
.progress .bar { -webkit-transition: width 2s ease-in-out; -moz-transition: width 2s ease-in-out; -ms-transition: width 2s ease-in-out; -o-transition: width 2s ease-in-out; transition: width 2s ease-in-out; }
-
Copyright 2012 minddust.com
bootstrap-progressbar is published under Apache License, Version 2.0 (see LICENSE file).