Progressbar
Linear Progress
Indeterminate progress
Indicates a running process where the progress is unknown using an animated svg. ex: AJAX form submission. Simply wrap .progress-bar-indeterminate
with Bootstrap's .progress
. The progress bar will automatically expand to get the width of its parent <div>
Color options
In addition to Bootstrap's contextual progress bar classes, Pages has introduced two new classes, .progress-bar-success
and .progress-bar-complete
if you want to add more color to your project
Size options
Append .progress-small
to .progress
to make the progress bars thinner than the usual height
Circular Progress
Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options
Indeterminate progress
Determinate progress
A determinate circular progress indicator can be initialized without writing a single line of Javascript code by simply including markup below. Pass any percentage value (0-100) into the value
field to set the progress
Color options
Color options can be set using the data-color
attribute. Any contextual color can be included.
Size options
Stroke of the circle can be made thicker by setting data-thick="true"
Last updated