Progress Bar
Introduction
A progress bar visually illustrates how far through a task a user is.
Live demo
- Core
- React
- Rails
CSS custom properties
These properties can be used to customise the component. See Theming for how to apply custom properties.
| Property | Type | Default value | Fallback value | Description |
|---|---|---|---|---|
--rpf-progress-bar-background-color | Independent | var(--color-progress-bar-incomplete) | — | Progress bar background colour |
--rpf-progress-bar-accent-color | Independent | var(--color-progress-bar-complete) | — | Filled progress segment colour |
--rpf-progress-bar-block-size | Independent | var(--space-1) | — | Progress bar block size (height) |
--rpf-progress-bar-border-radius | Independent | var(--space-1) | — | Progress bar border radius |
--rpf-progress-bar-gap | Independent | var(--space-3) | — | Space between the progress bar and label |
--rpf-progress-bar-font-size | Independent | var(--font-size-1) | — | Progress label font size |
--rpf-progress-bar-font-weight | Independent | var(--font-weight-regular) | — | Progress label font weight |
--rpf-progress-bar-complete-color | Independent | var(--rpf-alert-success) | — | Completed-state indicator colour |
--rpf-progress-bar-complete-icon | Independent | SVG checkmark in circle | — | Icon displayed when progress is complete |
--color-progress-bar-complete | Independent | var(--rpf-navy-800) | — | Deprecated: filled progress segment colour |
--color-progress-bar-incomplete | Independent | var(--rpf-grey-150) | — | Deprecated: progress bar background colour |
Variants
Completed
A completed state is available, but is not required.
Customising
With the CSS custom properties the progress bar can be customised.
Implementation:
- Core Storybook docs
- React Storybook docs
- Rails Lookbook docs