New This website is new, your feedback will help us to improve it.

Progress bar

Overview

Use the .bsk-progress-bar class to indicate the progress of some process or action.

This component requires the BAS style kit Javascript.

Add a <span class="sr-only"> element, this provides a non-visual indication of the progress item, suitable for assistive technologies.
aria-valuenow, aria-valuemin and aria-valuemax attributes are added automatically.

Progress bars are driven by the data-<> directives applied as shown in the examples here.

Variants

Default progress bar

20% Complete
<div class="w-full" data-progress data-current="20" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bsk-bg-blue transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">20% Complete</span></div>
  </div>
</div>

Progress bar with a label

75% Complete
<div class="w-full" data-progress data-current="75" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block text-white text-sm text-center h-full bsk-bg-blue transition-all duration-300" data-progress-fill flex style="width:0%"><span data-progress-bar-label></span><span class="sr-only">75% Complete</span></div>
  </div>
</div>

Progress bar with labels above

Progress
55% Complete
<div class="w-full" data-progress data-current="55" data-min="0" data-max="100">
  <div class="mb-1 flex justify-between">
      <span>Progress</span>
      <span data-progress-label></span>        
  </div>
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bsk-bg-blue transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">55% Complete</span></div>
  </div>
</div>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context Progress Bar Contextual Class
Success .bg-green-700
Warning .bg-amber-400
Danger .bg-red-700
Info .bg-sky-700

20% Complete

30% Complete

50% Complete

80% Complete
<div class="w-full" data-progress data-current="20" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bg-green-700 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">20% Complete</span></div>
  </div>
</div>
<br>
<div class="w-full" data-progress data-current="30" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bg-amber-400 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">30% Complete</span></div>
  </div>
</div>
<br>
<div class="w-full" data-progress data-current="50" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bg-red-700 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">50% Complete</span></div>
  </div>
</div>
<br>
<div class="w-full" data-progress data-current="80" data-min="0" data-max="100">
  <div class="block h-5 w-full overflow-hidden rounded bg-gray-200" role="progressbar" data-progress-bar>
      <div class="block h-full bg-sky-700 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">80% Complete</span></div>
  </div>
</div>

Stacked progress bar

This component has not been tested and may not work as expected.

20% Complete
40% Complete
75% Complete
<div class="relative w-full h-5">
  <div class="absolute inset-0 bg-gray-200 rounded"></div>
  <div class="absolute inset-0 z-2" data-progress data-current="20" data-min="0" data-max="100">
      <div class="block h-5 overflow-hidden rounded" role="progressbar" data-progress-bar>
          <div class="block h-full bg-green-700 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">20% Complete</span></div>
      </div>
  </div>
  <div class="absolute inset-0 z-1" data-progress data-current="40" data-min="0" data-max="100">
      <div class="block h-5 overflow-hidden rounded" role="progressbar" data-progress-bar>
          <div class="block h-full bg-amber-400 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">40% Complete</span></div>
      </div>
  </div>
  <div class="absolute inset-0" data-progress data-current="75" data-min="0" data-max="100">
      <div class="block h-5 overflow-hidden rounded" role="progressbar" data-progress-bar>
          <div class="block h-full bg-red-700 transition-all duration-300" data-progress-fill style="width:0%"><span class="sr-only">75% Complete</span></div>
      </div>
  </div>
</div>