PatternFly

Progress

A progress bar informs users about the completion status of an ongoing process or task.

Examples

Simple

Title

Small

Title

Large

Title

Outside

Title

Inside

Title
33%

Success

Title

Warning

Title

Failure

Title

Inside success

Title
100%

Inside warning

Title
100%

Outside failure

Title

Outside static width measure







On single line

Without measure

Title

Failure without measure

Title

Finite step

Title

Truncate description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ultricies lectus, eu lobortis mauris. Morbi pretium arcu id rhoncus mollis. Donec accumsan tincidunt enim nec varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti.

Helper text

Title
Progress helper text

Non-percentage progress

If the status that displays with the bar is not a percentage, then the ARIA tag aria-valuetext should be used to provide this status to screen reader users. This is the only case when setting the aria-valuemax to a value other than "100" is recommended, given how different screen readers handle these attributes.

Progress step instruction

Title

Documentation

Overview

Accessibility

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-v5-c-progress__bar
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-v5-c-progress__bar
This value needs to be updated as progress continues.
aria-valuemin="0"
.pf-v5-c-progress__bar
The minimum value for the progress bar.
aria-valuemax="100"
.pf-v5-c-progress__bar
The maximum value for the progress bar. If the progress is only defined using aria-valuenow (e.g a percentage), the value should be set to "100". If the progress is defined using aria-valuetext, then this value can be a number other than 100. For example, if aria-valuetext is "2 of 5 units", then aria-valuemax can be "5" and aria-valuenow can be "2".
aria-label="[id of .pf-v5-c-progress__description]"
.pf-v5-c-progress__bar
Provides an accessible name for the progress component.
aria-labelledby="[id element that labels the progress]"
.pf-v5-c-progress__bar
Provides an accessible name for the progress component.
aria-describedby="[id of element that describes the progress]"
.pf-v5-c-progress__bar
Provides an accessible description for the progress component.
aria-valuetext="[loading state]"
.pf-v5-c-progress__bar
Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from aria-valuenow when aria-valuetext is used.
aria-hidden="true"
.pf-v5-c-progress__status
Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the .pf-v5-c-progress__bar element.

Usage

Class
Applied to
Outcome
.pf-v5-c-progress
<div>
Initiates a progress component.
.pf-v5-c-progress__description
<div>
The description for a progress bar.
.pf-v5-c-progress__status
<div>
Displays the % of progress and status icons.
.pf-v5-c-progress__measure
<span>
Displays the % complete.
.pf-v5-c-progress__status-icon
<span>
Displays the status icon. (optional)
.pf-v5-c-progress__bar
<div>
Displays across the entire width and represents the completed state.
.pf-v5-c-progress__indicator
<div>
Displays with the .pf-v5-c-progress__bar to indicate the progress so far.
.pf-v5-c-progress__helper-text
<div>
Displays additional text below the progress bar. (optional)
.pf-m-lg
.pf-v5-c-progress
Modifies the progress bar to be larger.
.pf-m-sm
.pf-v5-c-progress
Modifies the progress bar to be smaller.
.pf-m-inside
.pf-v5-c-progress
Shows the measure within the progress indicator. NOTE: This option requires .pf-m-lg.
.pf-m-outside
.pf-v5-c-progress
Shows the measure and status icon to the right of the progress bar.
.pf-m-singleline
.pf-v5-c-progress
Modifies the progress component to exist on one row. If a measure is needed, use with .pf-m-inside or .pf-m-outside
.pf-m-success
.pf-v5-c-progress
Changes the appearance of the progess component to indicate a success state.
.pf-m-warning
.pf-v5-c-progress
Changes the appearance of the progess component to indicate a warning state.
.pf-m-danger
.pf-v5-c-progress
Changes the appearance of the progess component to indicate a danger (failure) state.
.pf-m-truncate
.pf-v5-c-progress__description
Modifies the description to display a single line and truncate any overflow text with ellipses.
.pf-m-static-width
.pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure
Modifies the measure element to have a static min-width that will hold 0-100%. Overridable by setting --pf-v5-c-progress__measure--m-static-width--MinWidth.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-progress--pf-v5-c-progress--GridGap
1rem
.pf-v5-c-progress--pf-v5-c-progress__bar--before--BackgroundColor
#06c
.pf-v5-c-progress--pf-v5-c-progress__bar--Height
1rem
.pf-v5-c-progress--pf-v5-c-progress__bar--BackgroundColor
#fff
.pf-v5-c-progress--pf-v5-c-progress__measure--m-static-width--MinWidth
4.5ch
.pf-v5-c-progress--pf-v5-c-progress__status--Gap
0.5rem
.pf-v5-c-progress--pf-v5-c-progress__status-icon--Color
#151515
.pf-v5-c-progress--pf-v5-c-progress__bar--before--Opacity
.2
.pf-v5-c-progress--pf-v5-c-progress__indicator--Height
1rem
.pf-v5-c-progress--pf-v5-c-progress__indicator--BackgroundColor
#06c
.pf-v5-c-progress--pf-v5-c-progress__helper-text--MarginTop
calc(0.25rem - 1rem)
.pf-v5-c-progress--pf-v5-c-progress--m-success__bar--BackgroundColor
#3e8635
.pf-v5-c-progress--pf-v5-c-progress--m-warning__bar--BackgroundColor
#f0ab00
.pf-v5-c-progress--pf-v5-c-progress--m-danger__bar--BackgroundColor
#c9190b
.pf-v5-c-progress--pf-v5-c-progress--m-success__status-icon--Color
#3e8635
.pf-v5-c-progress--pf-v5-c-progress--m-warning__status-icon--Color
#f0ab00
.pf-v5-c-progress--pf-v5-c-progress--m-danger__status-icon--Color
#c9190b
.pf-v5-c-progress--pf-v5-c-progress--m-inside__indicator--MinWidth
2rem
.pf-v5-c-progress--pf-v5-c-progress--m-inside__measure--Color
#fff
.pf-v5-c-progress--pf-v5-c-progress--m-success--m-inside__measure--Color
#fff
.pf-v5-c-progress--pf-v5-c-progress--m-warning--m-inside__measure--Color
#151515
.pf-v5-c-progress--pf-v5-c-progress--m-inside__measure--FontSize
0.875rem
.pf-v5-c-progress--pf-v5-c-progress--m-outside__measure--FontSize
0.875rem
.pf-v5-c-progress--pf-v5-c-progress--m-sm__bar--Height
0.5rem
.pf-v5-c-progress--pf-v5-c-progress--m-sm__description--FontSize
0.875rem
.pf-v5-c-progress--pf-v5-c-progress--m-sm__measure--FontSize
0.875rem
.pf-v5-c-progress--pf-v5-c-progress--m-lg__bar--Height
1.5rem
.pf-v5-c-progress.pf-m-sm--pf-v5-c-progress__bar--Height
0.5rem
.pf-v5-c-progress.pf-m-lg--pf-v5-c-progress__bar--Height
1.5rem
.pf-v5-c-progress.pf-m-success--pf-v5-c-progress__bar--before--BackgroundColor
#3e8635
.pf-v5-c-progress.pf-m-success--pf-v5-c-progress__status-icon--Color
#3e8635
.pf-v5-c-progress.pf-m-success--pf-v5-c-progress--m-inside__measure--Color
#fff
.pf-v5-c-progress.pf-m-warning--pf-v5-c-progress__bar--before--BackgroundColor
#f0ab00
.pf-v5-c-progress.pf-m-warning--pf-v5-c-progress__status-icon--Color
#f0ab00
.pf-v5-c-progress.pf-m-warning--pf-v5-c-progress--m-inside__measure--Color
#151515
.pf-v5-c-progress.pf-m-danger--pf-v5-c-progress__bar--before--BackgroundColor
#c9190b
.pf-v5-c-progress.pf-m-danger--pf-v5-c-progress__status-icon--Color
#c9190b

View source on GitHub