Skip to content
Pinky UI

Resumable Progress

Preserve the known position of a long operation across an interruption so the user can resume instead of restarting.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Importing archive

Paused at 56% · resume keeps the work

paused

Purpose

Preserve the known position of a long operation across an interruption so the user can resume instead of restarting.

Use when

Imports, uploads or processing jobs can pause, lose connection or be intentionally interrupted without invalidating their partial work.

Avoid

Displaying a stale percentage as if work is active, restarting from zero without explanation, or pretending resumability when the backend cannot continue.

Accessibility

State paused, running and complete in text, expose determinate progress when valid, and label Resume with the operation name.

Keyboard and touch

Resume and restart are native buttons. Keep the progress and next action visible when the control stacks at 390px.

Reduced motion and performance

Keep the saved progress static when motion is reduced. Store progress in the host when persistence matters and clean any active work on unmount.

Composition and anti-patterns

Use Background Task Row for a persistent task that cannot be paused. Resumable Progress is defined by retaining an interrupted position.

Source: packages/skills/loading/resumable-progress.md