Progress Bars - standard, small, large, coloured and animated
Standard Bootstrap progress bars (e.g. .progress-bar.progress-bar-danger)
Small Bootstrap progress bars (.progress.progress-sm)
Large Bootstrap progress bars (.progress.progress-lg)
COLOURcode progress bars ( e.g. .progress-bar.progress-bar-brand1)
Bootstrap-Progressbar - jQuery plugin for text and animations
Animated - add 'data-transitiongoal' attribute with required value to element, and 'bsprog-ease' class to container as follows (html simplified):
<div class="progress bsprog-ease">
<div class="progress-bar progress-bar-gold" data-transitiongoal="30">
</div>
Fill with value - add 'bsprog-filltext' class to container as follows (html simplified):
<div class="progress bsprog-ease bsprog-filltext">
<div class="progress-bar progress-bar-green" data-transitiongoal="50">
</div>
Putting it all together - add 'progress-bar-striped' and 'active' classes to element as follows (html simplified):
<div class="progress bsprog-ease bsprog-filltext">
<div class="progress-bar progress-bar-orange progress-bar-striped active" data-transitiongoal="70">
</div>