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>
In addition to Bootstrap's contextual progress bar classes, Pages has introduced two new classes, .progress-bar-successand .progress-bar-complete if you want to add more color to your project
Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options
Indeterminate progress
<div class="progress-circle-indeterminate"></div>
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
<!-- Show 75% of progress -->
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="complete">
Color options
Color options can be set using the data-color attribute. Any contextual color can be included.