Recipe: Progress bar UX patterns

1. Deterministic bar

Use when total steps are known. Bind width to current / total. Animate with CSS transition on the width property.

2. Indeterminate shimmer

Use when duration is unknown. A looping gradient sweep signals activity without promising completion.

3. Step indicator

For wizards, show discrete steps. Completed steps fill solid; current step pulses; future steps remain muted.

4. Accessibility

• Always set role="progressbar"
• Bind aria-valuenow and aria-valuemin/max
• Use aria-label for screen readers