Progress

A progress indicator linear is a visual representation of a user’s progress through a set of steps, guiding toward the completion of a specified process.

6xs

5xs

4xs

3xs

2xs

6xs with Label

5xs with Label

4xs with Label

3xs with Label

2xs with Label

HelloHelloHelloHelloHello

Indeterminate

Code

<div />
<!-- Progress Indeterminate -->
<progress class="backoffice-progress" min="0" max="100"></progress>
<!-- Progress determinate -->
<progress class="backoffice-progress" min="0" value="50" max="100"></progress>


<label
   for="label-example"
   class="bo-label backoffice-progress-container"
>
  <progress
     id="label-example"
     value="50"
     min="0"
     max="100"
  />
  Hello
</label>

Details

Attribute	Type	Description
.backoffice-progress	component	progress bar
.backoffice-progress-container	component	progress bar container for usage with label
.backoffice-progress-6xs	modifier	progress bar size 6xs
.backoffice-progress-5xs	modifier	progress bar size 5xs
.backoffice-progress-4xs	modifier	progress bar size 4xs
.backoffice-progress-3xs	modifier	progress bar size 3xs
.backoffice-progress-2xs	modifier	progress bar size 2xs