Repository navigation
Components: Expand ProgressBar functionality and visual customization #65528
Description
Problem Statement
The current ProgressBar component is quite limited, with no clear sizing or styling options.
As it stands, the bar itself is nearly invisible in certain contexts, making it unsuitable for cases where it needs to stand out. There is also a lack of flexibility for potential use cases other than being used for real-time updates, such as displaying scores or object meters.
Goals
- Explore adding more customization options for size, type, and styling of the
ProgressBar, either through props or other means. - Consider whether the
ProgressBarshould remain a single component or be expanded to include labels and indicators for more complex use cases. - Discuss the potential use of the component in scenarios beyond simple progress indication, such as denoting a score or other type of permanent status.
Designs
Linear
Circular
Feedback
- Should size, type, and styling be customizable through props, or is CSS sufficient for these changes?
- Would wrapping progress bar, labels, and indicators into a new component be a better approach for more complex needs?
- How do we ensure this component remains simple while still offering flexibility for advanced use cases?
Activity
[-]Components: `ProgressBar`[/-][+]Components: Expand `ProgressBar` functionality and visual customization[/+]mirka commentedon Sep 24, 2024
We don't have an official system yet, but from past explorations like the Theme component or the theme package, it's likely that we'll eventually adopt a system based on CSS variables.
The suggested patterns look reasonable, but since we don't have actual use cases in the Gutenberg app yet, I don't think we can officially codify them as part of the component yet.
simison commentedon Oct 8, 2024
A practical example of circular progress indicator that I'd find helpful right away:
simison commentedon Sep 30, 2026
Some of these features are coming up in:
Likely enough on those to close this or split into further follow-up issues. cc @ciampo
ciampo commentedon Sep 30, 2026
Hey @keoshi , as mentioned by @simison we're already working on ProgressBar in a few separate PRs.
Regarding the rest of the suggestions, this should be discussed together with @WordPress/gutenberg-design to understand what we want to support.
From recent conversations:
Metercomponent's track/thumb (see UI: Add Meter #83855) as the main way to visually distinguish a progress bar from a meter.ProgressBarandMetercomponents (UI: Add Progress with custom color support #83781 and Playlist Track: Constrain the Track image inspector preview #83885) have a compound API, exposing subcomonents like label and value that should allow consumers to compose in different layouts as needed;toneprop, which initially will supportneutralandbrandoptions, which will allow consumers to change the color of the thumb.youknowriad commentedon Oct 18, 2026
Thanks for kicking this off, @keoshi! Most of this has now landed in
@wordpress/ui: the newProgress(#83781) andMeter(#83855) components have a compound API with label/value/track/indicator subcomponents for composing different layouts.Progressaccepts a custom indicator color andMeteratone.ProgressBaritself now uses WPDS color tokens (#83779). As @ciampo noted, success/error states will be explored separately, and a circular variant would be a new, not-yet-specced component. I'm closing this in favour of focused follow-ups, so please open a new issue for either of those if design wants to pursue them.