Progress Bars for loading, redirecting, or action status

Progress bar horizontal static

default

colors

striped

Striped effect not available in IE7-8.

animated

Animate stripes not available in all versions of IE.

Stacked

Multiple bars into the same progress.

default SIZE

default ALIGNED

Progress bar start Left or Right

medium SIZE

You can adjust the height of style bootstrap

small SIZE

mini SIZE

default FILLING

Progress bar with a filling. Size fillers can be set to 2px, 3px, 4px, 5px, 6px
Default bar keeps the height 20px and 30px

medium FILLING

small FILLING

mini FILLING

Progress bar vertical static

vertical progress COLOR

vertical default TOP

vertical bottom

Animated ProgressBar

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.

default progressbar

no text

label for progress
transition: width 4s ease-in-out
watch a demo

filled text

transition: width 6s ease-in-out

centered text

update: 0%

setting progressbar

callback

0%
0%
0%
0%

filled text - right

centered text

watch a demo

multi trigger CONTROL VALUE

start with 100 start with 50 start with 0

no text

filled text

centered text

default vertical

watch a demo no text IN WELL

filled text IN WELL IMPRESSED

centered text IN WELL BLACK IMPRESSED

setting vertical progressbar

no text watch a demo

filled text

centered text

error

error CONTROLS

watch demo error progressbar
×
×