Skip to content
Pinky UI

loading

Multi-Stage Progress

Shows system execution moving through named stages with a detailed current stage, failure and retry.

  • loading
  • progress
  • stages
  • execution
  • retry
Related pattern

This is system execution, not a user-facing wizard; the current stage owns the next operational action.

Live preview

System execution

Process

2 / 4
  1. Upload
    Accepting the source file
  2. Process
    Preparing the working result
  3. Review
    Checking the output
  4. Complete
    Ready for the next product action

Preparing the working result

Quick usage

usage
import { MultiStageProgress } from "@pinky-ui/systems";

<MultiStageProgress stages={stages} />

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.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • 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

Show system execution moving through named stages with a detailed current stage, failure and retry.

Use when

Upload, process, review and completion are distinct machine stages rather than user decisions.

Avoid

Using a user-facing wizard, squeezing five labels into an unreadable mobile row, or treating a generic progress bar as a stage model.

Accessibility

Name the current stage, completed stages and failure in text. Use progress semantics only where the value is determinate and never rely on color alone.

Keyboard and touch

Advance, failure simulation in demos, and retry are native buttons. Stage context stacks vertically on narrow screens.

Reduced motion and performance

Keep stage state and retry destination visible without animated travel. Use discrete updates rather than a per-frame React progress loop.

Composition and anti-patterns

This is system execution. Use Progressive Step Workflow when completed user decisions remain editable context.

Open this skill on its own page