Progressbar

Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
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>
Animation in progress
1
<div style="width:50%">
2
    <div class="progress">
3
        <div class="progress-bar-indeterminate"></div>
4
    </div>
5
    </div>
6
</div>
Copied!
Color options
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
1
<div style="width:50%">
2
    <div class="progress">
3
        <div class="progress-bar progress-bar-primary" style="width: 35%;"></div>
4
    </div>
5
    <div class="progress">
6
        <div class="progress-bar progress-bar-complete" style="width: 45%;"></div>
7
    </div>
8
</div>
Copied!
Size options
Append .progress-small to .progress to make the progress bars thinner than the usual height
1
<div style="width:50%">
2
    <!-- Thinner progress bar -->
3
    <div class="progress progress-small">
4
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
5
    </div>
6
    <!-- Default height -->
7
    <div class="progress">
8
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
9
    </div>
10
</div>
Copied!
Circular Progress
Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options
Indeterminate progress
Animation in progress
1
<div class="progress-circle-indeterminate"></div>
Copied!
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
1
<!-- Show 75% of progress -->
2
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="complete">
Copied!
Color options
Color options can be set using the data-color attribute. Any contextual color can be included.

1
<input class="progress-circle" data-pages-progress="circle" value="45" type="hidden" data-color="complete">
2
<input class="progress-circle" data-pages-progress="circle" value="65" type="hidden" data-color="primary">
3
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="success">
Copied!
Size options
Stroke of the circle can be made thicker by setting data-thick="true"
1
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-thick="true">
Copied!
UI Elements - Previous
Modals
Next - UI Elements
Collapse
Last modified 3yr ago
Copy link
Contents
Linear Progress
Indeterminate progress
Circular Progress
Indeterminate progress
Determinate progress