loading
Resumable Progress
Preserves progress across an interruption so a long operation can resume instead of restarting.
- loading
- resume
- pause
- long-running
- progress
The paused position is part of the product state and remains readable without motion.
Live preview
Importing archive
Paused at 56% · resume keeps the work
Quick usage
import { ResumableProgress } from "@pinky-ui/systems";
<ResumableProgress label="Importing archive" />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add resumable-progressPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
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.