Progress
Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. Progress bars can also inform users about their progress through a tutorial or a series of steps to reach completion. Related design guidelines: Progress bar
ExamplesPropsCSS VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Classname for progress component. |
| size | 'sm' | 'md' | 'lg' | No | null | Size variant of progress. |
| measureLocation | 'outside' | 'inside' | 'top' | 'none' | No | ProgressMeasureLocation.top | Where the measure percent will be located. |
| variant | 'danger' | 'success' | No | null | Status variant of progress. |
| title | string | No | '' | Title above progress. |
| label | React.ReactNode | No | null | Text description of current progress value to display instead of percentage. |
| value | number | No | 0 | Actual value of progress. |
| id | string | No | '' | DOM id for progress component. |
| min | number | No | 0 | Minimal value of progress. |
| max | number | No | 100 | Maximum value of progress. |
| valueText | string | No | null | Accessible text description of current progress value, for when value is not a percentage. Use with label. |
CSS Variables
| .pf-c-progress | --pf-c-progress--GridGap | 1rem | ||
| .pf-c-progress | --pf-c-progress__bar--before--BackgroundColor | #06c | ||
| .pf-c-progress | --pf-c-progress__bar--Height | 1rem | ||
| .pf-c-progress | --pf-c-progress__bar--BackgroundColor | #fff | ||
| .pf-c-progress | --pf-c-progress__status-icon--Color | #151515 | ||
| .pf-c-progress | --pf-c-progress__status-icon--MarginLeft | 0.5rem | ||
| .pf-c-progress | --pf-c-progress__bar--before--Opacity | .2 | ||
| .pf-c-progress | --pf-c-progress__indicator--Height | 1rem | ||
| .pf-c-progress | --pf-c-progress__indicator--BackgroundColor | #06c | ||
| .pf-c-progress | --pf-c-progress--m-danger__bar--BackgroundColor | #c9190b | ||
| .pf-c-progress | --pf-c-progress--m-success__bar--BackgroundColor | #3e8635 | ||
| .pf-c-progress | --pf-c-progress--m-danger__status-icon--Color | #c9190b | ||
| .pf-c-progress | --pf-c-progress--m-success__status-icon--Color | #3e8635 | ||
| .pf-c-progress | --pf-c-progress--m-inside__indicator--MinWidth | 2rem | ||
| .pf-c-progress | --pf-c-progress--m-inside__measure--Color | #fff | ||
| .pf-c-progress | --pf-c-progress--m-success--m-inside__measure--Color | #151515 | ||
| .pf-c-progress | --pf-c-progress--m-inside__measure--FontSize | 0.875rem | ||
| .pf-c-progress | --pf-c-progress--m-outside__measure--FontSize | 0.875rem | ||
| .pf-c-progress | --pf-c-progress--m-sm__bar--Height | 0.5rem | ||
| .pf-c-progress | --pf-c-progress--m-sm__description--FontSize | 0.875rem | ||
| .pf-c-progress | --pf-c-progress--m-sm__measure--FontSize | 0.875rem | ||
| .pf-c-progress | --pf-c-progress--m-lg__bar--Height | 1.5rem | ||
| .pf-c-progress.pf-m-sm | --pf-c-progress__bar--Height | 0.5rem | ||
| .pf-c-progress.pf-m-lg | --pf-c-progress__bar--Height | 1.5rem | ||
| .pf-c-progress.pf-m-success | --pf-c-progress__bar--before--BackgroundColor | #3e8635 | ||
| .pf-c-progress.pf-m-success | --pf-c-progress__status-icon--Color | #3e8635 | ||
| .pf-c-progress.pf-m-success | --pf-c-progress--m-inside__measure--Color | #151515 | ||
| .pf-c-progress.pf-m-danger | --pf-c-progress__bar--before--BackgroundColor | #c9190b | ||
| .pf-c-progress.pf-m-danger | --pf-c-progress__status-icon--Color | #c9190b | ||
