Progress Bar
Default Progress Bar
<div class="progress-bar">
<span class="progress" style="width: 50%;"></span>
</div>
Notice:
Progress bar sizes vary depending on the size of their containing element. It is recommended to determine the size of the progress bar by using .cols-* layout classes. Also, as shown in the code block above, the progress width is currently defined inline for demo purpose.
Progress Bar States
Progress bar colors / states can easily be set by adding the following classes: .-disabled .-success .-warning .-danger
<!-- Disabled State -->
<div class="progress-bar -disabled"></div>
<!-- Active State -->
<div class="progress-bar">
<span class="progress" style="width: 50%;"></span>
</div>
<!-- Success State -->
<div class="progress-bar -success">
<span class="progress" style="width: 100%;"></span>
</div>
<!-- Warning State -->
<div class="progress-bar -warning">
<span class="progress" style="width: 50%;"></span>
</div>
<!-- Danger State -->
<div class="progress-bar -danger">
<span class="progress" style="width: 50%;"></span>
</div>
Progress Bar With Text
<div class="progress-bar-wrapper">
<div class="text">
<span>Contract.pdf</span>
<span class="-primary right">50%</span>
</div>
<div class="progress-bar">
<span class="progress" style="width: 50%;"></span>
</div>
<span class="text">Uploading file…</span>
</div>
Notice:
When using progress bars with text, make sure to always use .progress-bar-wrapper
Progress Bar Usage
Upload Documents
Related mixin
@mixin progress-variant($container-bg-color, $progress-bg-color) {
background-color: $container-bg-color;
.progress {
background-color: $progress-bg-color;
}
}
Example
Usage:
.element {
@include progress-variant($primary-color-light-100, $primary-color);
}
CSS Output:
.element {
background-color: #ecf7fd;
}
.element .progress {
background-color: #1e99eb;
}