Progress
A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-progress/pf-progress.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
Installation
npm install @patternfly/elementsUsage
Success variant
View HTML Source
<pf-progress variant="success" value="50"></pf-progress>
Inside measurement
View HTML Source
<pf-progress value="24" measure-location="inside"></pf-progress>
Large size
View HTML Source
<pf-progress value="24" size="lg"></pf-progress>
Inside measurement
View HTML Source
<pf-progress value="24" measure-location="inside"></pf-progress>
Truncated Description
View HTML Source
<pf-progress
value="29"
description-truncated
description="Very very very very very very very very very very very long description which should be truncated if it does not fit onto one line above the progress bar"
></pf-progress>
Slots
None
Attributes
value-
Represents the value of the progress bar
- DOM Property
value- Type
-
number - Default
-
0
description-
Description (title) above the progress bar
- DOM Property
description- Type
-
string | undefined - Default
-
unknown
description-truncated-
Indicate whether to truncate the string description (title)
- DOM Property
descriptionTruncated- Type
-
boolean - Default
-
false
max-
Maximum value for the progress bar
- DOM Property
max- Type
-
number - Default
-
100
min-
Minimum value for the progress bar
- DOM Property
min- Type
-
number - Default
-
0
size-
Size of the progress bar (height)
- DOM Property
size- Type
-
'sm' | 'lg' | undefined - Default
-
unknown
measure-location-
Where the percentage will be displayed with the progress element
- DOM Property
measureLocation- Type
-
'outside' | 'inside' | 'none' | undefined - Default
-
unknown
variant-
Variant of the progress bar
- DOM Property
variant- Type
-
'success' | 'danger' | 'warning' | undefined - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-progress--GridGap |
Gap between the sections of the progress bar. |
1rem
|
--pf-c-progress__bar--before--BackgroundColor |
Color of the progress bar. |
#06c
|
--pf-c-progress__bar--Height |
Height of the progress bar. |
1rem
|
--pf-c-progress__bar--BackgroundColor |
Background color of the progress bar. |
#ffffff
|
--pf-c-progress__status-icon--Color |
Color of the status icon. |
#151515
|
--pf-c-progress__status-icon--MarginLeft |
Margin left of the status icon. |
0.5rem
|
--pf-c-progress__indicator--Height |
Height of the progress bar indicator. |
1rem
|
--pf-c-progress__indicator--BackgroundColor |
Background color of the progress bar indicator. |
#ffffff
|
--pf-c-progress--m-success__bar--BackgroundColor |
Background color of the progress bar when variant is success. |
#3e8635
|
--pf-c-progress--m-warning__bar--BackgroundColor |
Background color of the progress bar when variant is warning. |
#f0ab00
|
--pf-c-progress--m-danger__bar--BackgroundColor |
Background color of the progress bar when variant is danger. |
#c9190b
|
--pf-c-progress--m-success__status-icon--Color |
Color of the status icon when variant is success. |
#3e8635
|
--pf-c-progress--m-warning__status-icon--Color |
Color of the status icon when variant is warning. |
#f0ab00
|
--pf-c-progress--m-danger__status-icon--Color |
Color of the status icon when variant is danger. |
#c9190b
|
--pf-c-progress--m-success--m-inside__measure--Color |
Color of the progress bar measure when variant is success and measure location is inside. |
#ffffff
|
--pf-c-progress--m-outside__measure--FontSize |
Font size of the progress bar measure when measure location is outside. |
0.875rem
|
--pf-c-progress--m-sm__bar--Height |
Height of the progress bar when the size is small. |
0.5rem
|
--pf-c-progress--m-sm__description--FontSize |
Font size of the progress bar description when the size is small. |
0.875rem
|
--pf-c-progress--m-lg__bar--Height |
Height of the progress bar when the size is large. |
1.5rem
|
CSS Shadow Parts
None
