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.

>

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>

>

,

>

,

,

$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3

>

,

>

,

,

<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">

> /

,

>

,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>

>

,

,
>
,
,





,





>
/Bootstrap-Progressbar.jpg">


,
>
,
,





,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,





,
>
" src="http://www.developerslane.com/wp-content/uploads/
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
,





,
>
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
,





,
>
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
,
>
,
,





>
,
,
,
>
/
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
,
>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
,
,
>
/Bootstrap-Progressbar.jpg" alt="Bootstrap Progressbar" width="
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
,
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,





>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
" height="
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
"  no-resize-detection />

,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>What's new in v
,
,
>
,
,
,





>
.
,
,
>
,
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
.
,
,
>
,
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
?,
,
>
>
Add bootstrap
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
,
,
>
.
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
.
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,





>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
styles
Switch to Gulp
Remove bs dotfiles
Fix #
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
compile errors with old markup
Fix #
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
,
>
wrong style generation
Fix #
,
,





>
,
,
,
>
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
,
>
element creation which will brick with django-compressor
Note: this version sets (fixes) some vertical styles which may affect (or brick) your styles. Please checkout the css or less before updating.
,


,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
>Demo,
,
>
>
http://minddust.github.com/bootstrap-progressbar
,


,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>Installation,
,
>
>
Download the latest release: 

,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">

 ,








>
.
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
.zip">v
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
.
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
.
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
Clone the repository: git clone [email protected]:minddust/bootstrap-progressbar.git
Install with Bower: bower install bootstrap-progressbar
,


,
>
>Usage,
,





>
>
include bootstrap-progressbar.js
,
,
>
,
,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
activate bootstrap-progressbar functionality on progressbars of your choice:
,
,
>
,
,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
>
set the aria attribute and remove the width style attribute (alternatively you can set it to
,
,
>
,
,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
)
aria-valuetransitiongoal
,
,
>
,
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
aria-valuemin (default:
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,





>
) and aria-valuemax (default:
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
)
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
,







,
,
>
>Usage Extended,





,
,





>
>
Do I need the additional style file?
for the horizontal bar with no or filled text: NO
for any vertical bars or the horizontal bar with centered text or right aligned bar: YESless:
,





,
,
>
,
,





,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
css:
,





,
,
>
,
,





,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
>
you can find your needed css or less file inside the css or less folder.
Multiple triggerYou can trigger progressbar as much as you want. Just change your aria attribute(s) and trigger .progressbar() again. All settings made before will be kept.

,





,
,
>
>Settings,





,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
 ,







,
,
>
>default values,





,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
,





,





,
>
,
,





,





,





>
>

,





,





,
>
>transition_delay
,





,





,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
Is the time in milliseconds until the animation starts.
This could be useful to delay the start on the initial page load like:
,





,





,
>
,
,





,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
>

,





,





,
>
>refresh_speed
,





,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
Is the time in milliseconds which will elapse between every text refresh, aria-valuenow attribute update and update callback call.

,





,





,
>
>display_text
,





,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
Determines if and where to display text on the progressbar. Possible options:
none no text
fill text on filled bar
center text on center (this mode changes css / html due to styling requirements)

,





,
,
>
>use_percentage
,





,
,





>
>
If text will be displayed - this option determines whether to show the percentage value or the amount.
So if use_percentage is false and aria-valuemin and aria-valuemax are not set (or to 
,





,
,
>
,

 ,






,
,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
 and 
,
 






,
,
>
,
,
 






,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
 






,
,
>
,
,
 






,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
,
 






,
,
>
,
,
 






,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
) the value will be the same but amount_format will be used to format the result.
Example:
<div aria-valuetransitiongoal="
,





,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

 ,







 ,


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
 






>

 ,






,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

 ,






,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
">
with use_percentage: true is the final text: 
,





,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

 ,






,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>

 ,






,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

 ,






,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
%
with use_percentage: false is the final text: 
,





,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,

 ,






,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
 






,
,
>
,

 ,






,
,
 






>
/
,
 






,
,
>
,

 ,






,
,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
 






,
,
>
,
,
 






,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,
 






,
,
>
,
,
 






,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>

,





,
,
>
>percent_format
,





,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
Is a function which returns the text format for progressbar with use_percentage: true.
It takes
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
,
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,





>
argument which is the current percent value.

,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
>amount_format
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
Is a function which returns the text format for progressbar with use_percentage: false.
It takes
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
,
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
argument which are the current and total amount.

,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
>update
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
Is a callback function which will be called while the progressbar is transitioning 😉
Depends on refresh_speed.
It takes
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
>
,
,





,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
argument which is the current percent value.

,





,
,
>
>done
,





,
,





>
>
Is a callback function which will be called when the transition process is done.

,





,
,
>
>fail
,





,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
Is a callback function which will be called when an error occurs.
It takes
,





,
,
>
,
,





,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
argument which is the error message.

,





,
,
>
>Customisation
,





,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
 
,






,
,
>
>alignment
,

 






,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
to use a horizontal progressbar which is align to the right you have to add right to the progress element.
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,





>
>
to use a vertical progressbar you have to add vertical to the progress element.
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
to use a vertical progressbar which is align to the bottom you have to add vertical and bottom to the progress element.
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
,
,





,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>

,

 






,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
>
>animation
,

 






,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
to change the animation itself you have to overwrite either less or css
horizontal
less
,





,
,
>
,
,





,
,





>
,





,
,
>
,
,





,
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
>
css
,





,
,
>
,
,





,
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
,





,
,
>
,
,





,
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
vertical
less
,





,
,
>
,
,





,
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,





>
>
css
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,

,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,





,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
$('.progress .bar').progressbar();           // bootstrap 2
$('.progress .progress-bar').progressbar();  // bootstrap 3
>
>

,

 






,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
>Known Problems
,

 






,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<link rel="stylesheet/less" type="text/css" href="bootstrap-progressbar.less">
>
>
Looks like iOS Safari is flooring the width of the transition. So if you want to display text with a correct value you have to use a full bar width greater or equal
,
 






,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
>
,
,
 






,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
,
<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
,
,
,
>
,
,
,
,
 






>
,
,
,
>
,
,
,
,
 


,

<script type="text/javascript" src="bootstrap-progressbar.js"></script>
>
px.
Read More Demo Download