Progress

Overview

A Progress Bar is used to indicate how much progress a user has made in a workflow, expressed as a percentage (%). It provides visual feedback during multi-step or multi-phase processes and helps users understand how far they are from completion.

Progress Bars communicate status, not activity. They should not be used as loading indicators or pre-loaders. For page or system loading feedback, use the EnLoading component instead.

Guidelines

Dos

• Use Progress Bars for workflows with multiple steps or phases.
• Display progress as a clear percentage of completion.
• Update the Progress Bar as the user advances through the workflow.
• Use Progress Bars to set expectations and reduce user uncertainty.
• Ensure progress values are accurate and meaningful.

Don’ts

• Don’t use Progress Bars as page loaders or spinners.
• Don’t use Progress Bars for indeterminate or unknown durations.
• Don’t display a Progress Bar if there is no measurable progress.
• Don’t reset or regress progress unexpectedly without explanation.
• Don’t rely on color alone to convey progress state.

Variants

Variant	Description	Example Use
Default	Standard progress indication	Multi-step forms, setup flows
Success	Indicates completion or positive progression	Final or completed steps

Structure

Progress Bars should clearly represent completion from 0% to 100%.

• Always define aria-valuemin, aria-valuemax, and aria-valuenow.
• The width of the progress bar should directly reflect the percentage value.
• Progress text may be visually displayed or screen-reader–only.

Accessibility

Use appropriate ARIA attributes to communicate progress to assistive technologies.

• If visual text is hidden, include a screen-reader–only value.
• Ensure sufficient contrast between the progress bar and its background.

Example with screen-reader text:

Related Components

EnLoading — Page and system loading indicators.

Progress Bar