# Progress

Source: https://design.ritchiebros.com/components/feedback/progress/

Progress indicators visually represent how much of a task or operation has completed and how much is left. Use a bar for measurable progress and a spinner for short, indeterminate waits.

## Figma

The Figma reference for **Progress** will appear here once the design link is added.

## Storybook

Interactive examples for **Progress** will render here once the Storybook link is wired in.

## Best practices

- Give people an indication of how much of the task has completed and how much remains.
- Don’t use a progress indicator for an entire page load — use skeletons for that.
- Use a spinner for short waits and for content that can’t be represented by skeletons, such as charts.
- Give a spinner an accessible label that describes the state: “Loading”, “Submitting”, “Processing”.

## Do’s and don’ts

**Do:** Use a determinate bar when the remaining time is known.

**Don’t:** Show a spinner indefinitely with no context about what’s happening.

## Accessibility

- Provide an accessible label so assistive technology can announce the purpose and state of the indicator.
- Keep the label short and accurate to the action in progress.

## Related components

- [Skeleton](https://design.ritchiebros.com/components/feedback/skeleton/)
- [Backdrop](https://design.ritchiebros.com/components/feedback/backdrop/)