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 - 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' - Default
-
unknown
measure-location-
Where the percentage will be displayed with the progress element
- DOM Property
measureLocation- Type
-
'outside' | 'inside' | 'none' - Default
-
unknown
variant-
Variant of the progress bar
- DOM Property
variant- Type
-
'success' | 'danger' | 'warning' - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--primary-color--100 |
#0066cc
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-global--BackgroundColor--light-100 |
#ffffff
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-global--Color--light-100 |
#ffffff
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-c-progress--GridGap |
—
|
|
--pf-c-progress--m-sm__bar--Height |
—
|
|
--pf-c-progress--m-sm__description--FontSize |
—
|
|
--pf-c-progress--m-lg__bar--Height |
—
|
|
--pf-c-progress--m-outside__measure--FontSize |
—
|
|
--pf-c-progress--m-success__bar--BackgroundColor |
—
|
|
--pf-c-progress--m-success__status-icon--Color |
—
|
|
--pf-c-progress--m-warning__bar--BackgroundColor |
—
|
|
--pf-c-progress--m-warning__status-icon--Color |
—
|
|
--pf-c-progress--m-danger__bar--BackgroundColor |
—
|
|
--pf-c-progress--m-danger__status-icon--Color |
—
|
|
--pf-c-progress__status-icon--MarginLeft |
—
|
|
--pf-c-progress__status-icon--Color |
—
|
|
--pf-c-progress__bar--BackgroundColor |
—
|
|
--pf-c-progress__indicator--Height |
—
|
|
--pf-c-progress__indicator--BackgroundColor |
—
|
|
--pf-c-progress--m-success--m-inside__measure--Color |
—
|
|
--pf-c-progress__bar--Height |
—
|
|
--pf-c-progress__bar--before--BackgroundColor |
—
|
CSS Shadow Parts
None
