PF Next

Progress

Progress Simple

Preview

Descriptive text here
33%
<div class="pf-c-progress" id="progress-simple-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-simple-example-description">
  <div class="pf-c-progress__description" id="progress-simple-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Small

Preview

Descriptive text here
33%
<div class="pf-c-progress pf-m-sm" id="progress-sm-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-sm-example-description">
  <div class="pf-c-progress__description" id="progress-sm-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Large

Preview

Descriptive text here
33%
<div class="pf-c-progress pf-m-lg" id="progress-lg-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-lg-example-description">
  <div class="pf-c-progress__description" id="progress-lg-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Outside

Preview

Descriptive text here
33%
<div class="pf-c-progress pf-m-outside pf-m-lg" id="progress-outside-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-outside-example-description">
  <div class="pf-c-progress__description" id="progress-outside-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Inside

Preview

Descriptive text here
33%
<div class="pf-c-progress pf-m-lg pf-m-inside" id="progress-inside-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-inside-example-description">
  <div class="pf-c-progress__description" id="progress-inside-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
      <span class="pf-c-progress__measure">33%</span>
    </div>
  </div>
</div>

Progress Success

Preview

Success
100%
<div class="pf-c-progress pf-m-success" id="progress-success-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-describedby="progress-success-example-description">
  <div class="pf-c-progress__description" id="progress-success-example-description">
    Success
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">100%</span>
    <i class="fas fa-check-circle pf-c-progress__status-icon"></i>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 100%;">
    </div>
  </div>
</div>

Progress Failure

Preview

Failure due to an error
33%
<div class="pf-c-progress pf-m-danger" id="progress-failure-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-failure-example-description">
  <div class="pf-c-progress__description" id="progress-failure-example-description">
    Failure due to an error
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
    <i class="fas fa-times-circle pf-c-progress__status-icon" aria-hidden="true"></i>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Inside Success

Preview

Success
100%
<div class="pf-c-progress pf-m-lg pf-m-inside pf-m-success" id="progress-inside-success-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-describedby="progress-inside-success-example-description">
  <div class="pf-c-progress__description" id="progress-inside-success-example-description">
    Success
  </div>
  <div class="pf-c-progress__status">
    <i class="fas fa-check-circle pf-c-progress__status-icon"></i>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 100%;">
      <span class="pf-c-progress__measure">100%</span>
    </div>
  </div>
</div>

Progress Outside Failure

Preview

Failure due to an error
33%
<div class="pf-c-progress pf-m-outside pf-m-lg pf-m-danger" id="progress-outside-failure-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-outside-failure-example-description">
  <div class="pf-c-progress__description" id="progress-outside-failure-example-description">
    Failure due to an error
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
    <i class="fas fa-times-circle pf-c-progress__status-icon" aria-hidden="true"></i>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Without Measure

Preview

Descriptive text here
<div class="pf-c-progress" id="progress-no-measure-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-no-measure-example-description">
  <div class="pf-c-progress__description" id="progress-no-measure-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress Failure Without Measure

Preview

Descriptive text here
<div class="pf-c-progress pf-m-danger" id="progress-no-measure-failure-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="progress-no-measure-failure-example-description">
  <div class="pf-c-progress__description" id="progress-no-measure-failure-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <i class="fas fa-times-circle pf-c-progress__status-icon" aria-hidden="true"></i>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

Progress with Dynamic Description

Preview

Descriptive text here
33%
<div class="pf-c-progress" id="progress-dynamic-example" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-valuetext="Descriptive text here">
  <div class="pf-c-progress__description" id="progress-dynamic-example-description">
    Descriptive text here
  </div>
  <div class="pf-c-progress__status">
    <span class="pf-c-progress__measure">33%</span>
  </div>
  <div class="pf-c-progress__bar">
    <div class="pf-c-progress__indicator" style="width: 33%;">
    </div>
  </div>
</div>

If the description is updated dynamically, then the ARIA tag aria-valuetext should be used to provide this dynamic description. (And then aria-describedby is no longer used.)

Documentation

Overview

Accessibility

Note: If this component is describing the loading progress of a particular region of a page, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.

Attribute Applied To Outcome
role="progressbar" .pf-c-progress This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps.
aria-valuenow="" .pf-c-progress This value needs to be updated as progress continues.
aria-valuemin="0" .pf-c-progress The minimum value for the progress bar.
aria-valuemax="100" .pf-c-progress The maximum value for the progress bar.
aria-describedby="[id of .pf-c-progress__description]" .pf-c-progress The description of what progress is being shown.
aria-valuetext="[loading state]" .pf-c-progress Text that explains the current state of the progress (used in place of aria-describedby only when the text is updated dynamically as progress proceeds).

Usage

Class Applied To Outcome
.pf-c-progress <div> Initiates a progress component.
.pf-c-progress__description <div> The description for a progress bar.
.pf-c-progress__status <div> Displays the % of progress and status icons.
.pf-c-progress__measure <span> Displays the % complete.
.pf-c-progress__status-icon <span> Displays the status icon. (optional)
.pf-c-progress__bar <div> Displays across the entire width and represents the completed state.
.pf-c-progress__indicator <div> Displays with the .pf-c-progress__bar to indicate the progress so far.
.pf-m-lg .pf-c-progress Modifies the progress bar to be larger.
.pf-m-sm .pf-c-progress Modifies the progress bar to be smaller.
.pf-m-inside .pf-c-progress Shows the measure within the progress indicator. NOTE: This option requires .pf-m-lg.
.pf-m-outside .pf-c-progress Shows the measure and status icon to the right of the progress bar.
.pf-m-success .pf-c-progress Changes the appearance of the progess component to indicate a success state.
.pf-m-danger .pf-c-progress Changes the appearance of the progess component to indicate a danger (failure) state.