acl-1.0.10

Progress Bar

Default Progress Bar
In-progress progress
Complete progress
<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
Active State
Success State
Warning State
Danger State
<!-- 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
+ Select file
Upload disabled. Please verify your account.
Contract.pdf 0%
Your upload is about to start…
Contract.pdf 50%
Uploading file…
Skylight.mp3 100%
Download complete!
Video_2016.mp4 50%
Your file exceeds the quota size limit.
Design_Brief.pdf 50%
Oops! An error occured.
Contract.pdf 50%
Uploading file…
<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
Contract.pdf 50%
+ Add File
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;
}