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 ProgressBar should 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

→ Link to Figma

Circular

→ Link to Figma

Feedback

1. Should size, type, and styling be customizable through props, or is CSS sufficient for these changes?
2. Would wrapping progress bar, labels, and indicators into a new component be a better approach for more complex needs?
3. How do we ensure this component remains simple while still offering flexibility for advanced use cases?

Would love to hear your thoughts @mirka @ciampo @tyxla.