When to use it

Use Progress when the system can report a meaningful completion value. It works well for uploads, onboarding steps expressed as a percentage, and checkout or setup flows that expose measured progress.

If the task is loading but you do not know how far along it is, use a skeleton or another indeterminate loading pattern instead.

Composition notes

Progress is a single visual primitive. The accessible label, task name, and visible percentage usually come from the surrounding layout rather than the component itself.

Keep the bar focused on the visual state and place supporting text nearby so the screen layout explains what is progressing.

Behavior and theming guidance

Treat the value as a percentage from 0 to 100. When you show a number next to the bar, keep it in sync with the same source of truth so the visual fill and the text never drift apart.

Use color as reinforcement, not the only signal. A short label and visible percentage make the state much clearer, especially in dense admin or checkout surfaces.