Progress Bar

HTML

A progress bar informs users about the progression of a running task, and can contextually mark the current point in a period.

The Progress Bar component is a custom component and comes in line and circular style, both of which offer different levels of data exposure.

Line

33% with custom text
30% Custom text
60% Custom text
HTML
    <div
  class="o-progress-bar o-progress-bar--line"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="o-progress-bar__line">
    <div class="o-progress-bar__line-outer">
      <div class="o-progress-bar__line-inner" style="width: 60%;"> 
      </div>
    </div>
  </div>
</div>

<div
  class="o-progress-bar o-progress-bar--line"
  style="color: #474ba5;"
  role="progressbar"
  aria-valuenow="33"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="o-progress-bar__line">
    <div class="o-progress-bar__line-outer" style="height:15px;">
      <div class="o-progress-bar__line-inner" style="width: 33%;"></div>
    </div>
  </div>
  <div class="o-progress-bar__text">
    <span>33%</span>
    <span class="o-progress-bar__custom-text">with custom text</span>
  </div>
</div>

<div
  class="o-progress-bar o-progress-bar--line"
  style="color: blue;"
  role="progressbar"
  aria-valuenow="30"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="o-progress-bar__line">
    <div class="o-progress-bar__line-outer" style="height:18px;">
      <div class="o-progress-bar__line-inner" style="width: 30%;">
        <div class="o-progress-bar__line-innerText">
          30% Custom text
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-progress-bar o-progress-bar--line"
  style="color: red;"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="o-progress-bar__line">
    <div class="o-progress-bar__line-outer" style="height:18px;">
      <div class="o-progress-bar__line-inner" style="width: 60%;">
        <div class="o-progress-bar__line-innerText">
          60% Custom text
        </div>
      </div>
    </div>
  </div>
</div>
  

Circle

50 % Custom text
HTML
    <div class="o-progress-bar o-progress-bar--circle"
  data-width="250"
  data-stroke-width="20"
  aria-valuenow="30"
  aria-valuemin="0"
  aria-valuemax="100"
  style="color: #474BA5;">
  <div class="o-progress-bar__circle">
    <svg viewBox="0 0 100 100">
      <path class="o-progress-bar__circle-track" fill="none"></path>
      <path class="o-progress-bar__circle-path"stroke-linecap="square" stroke="currentColor" fill="none"></path>
    </svg>
  </div>
</div>

<div class="o-progress-bar o-progress-bar--circle"
  data-width="170"
  data-stroke-width="5"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  style="color: green;">
  <div class="o-progress-bar__circle">
    <svg viewBox="0 0 100 100">
      <path class="o-progress-bar__circle-track" fill="none"></path>
      <path class="o-progress-bar__circle-path" stroke-linecap="square" stroke="currentColor" fill="none"></path>
    </svg>
  </div>
</div>

<div class="o-progress-bar o-progress-bar--circle"
  data-width="100"
  data-stroke-width="10"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  style="color: red;">
  <div class="o-progress-bar__circle">
    <svg viewBox="0 0 100 100">
      <path class="o-progress-bar__circle-track" fill="none"></path>
      <path class="o-progress-bar__circle-path" stroke-linecap="square" stroke="currentColor" fill="none"></path>
    </svg>
  </div>

  <div class="o-progress-bar__text">
    <span class="o-progress-bar__text-number">50</span>
    <span class="o-progress-bar__text-percentage">%</span>
    <span class="o-progress-bar__custom-text">Custom text</span>
  </div>
</div>
  

Disabled

50 % Custom text
HTML
    <div class="o-progress-bar o-progress-bar--line is-disabled"
  style="color: red;"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div class="o-progress-bar__line">
    <div class="o-progress-bar__line-outer">
      <div class="o-progress-bar__line-inner" style="width: 60%;"> 
      </div>
    </div>
  </div>
</div>
      
<div class="o-progress-bar o-progress-bar--circle is-disabled"
  data-width="100"
  data-stroke-width="10"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  style="color: red;">
  <div class="o-progress-bar__circle">
    <svg viewBox="0 0 100 100">
      <path class="o-progress-bar__circle-track" fill="none"></path>
      <path class="o-progress-bar__circle-path" stroke-linecap="square" stroke="currentColor" fill="none"></path>
    </svg>
  </div>

  <div class="o-progress-bar__text">
    <span class="o-progress-bar__text-number">50</span>
    <span class="o-progress-bar__text-percentage">%</span>
    <span class="o-progress-bar__custom-text">Custom text</span>
  </div>
</div>
  

Usage

Attribute Description Type Required Default
value Set with data attribute aria-valuenow. Note: Set value as text if you have it. Number - -
stroke-width Set with data attribute data-stroke-width. Number - 8
width Change width and height of progress bar type circle by setting data attribute data-width. Number - 170
color Color of progress bar and text. Set style color attribute. String - secondary
disabled Set with is-disabled class on .o-progress-bar String - -