Skip to content
Pinky UI

loading

Progressive Status

Reveals increasingly specific operational detail only when a single operation takes long enough to need it.

  • loading
  • status
  • processing
  • delay
  • detail
Related pattern

The operation starts quiet, then earns detail as elapsed time changes what the user needs to know.

Live preview

Processing

1 of 3 operational updates

Processing

Quick usage

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

<ProgressiveStatus autoStart steps={steps} />

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

Reveal increasingly specific operational detail only as one operation takes long enough to need it.

Use when

Processing can move from a generic wait to meaningful sub-status such as preparing, optimizing and checking.

Avoid

Showing implementation detail immediately, faking progress with unrelated percentages, or leaving a static Processing label forever.

Accessibility

Expose the current stage and total stage count in text and announce only meaningful stage changes through a polite status.

Keyboard and touch

Start and restart are native buttons. The readable current status must remain visible on a narrow screen without a hover explanation.

Reduced motion and performance

Keep the same stage sequence while removing travel and opacity animation. Clean each delayed transition on restart and unmount.

Composition and anti-patterns

Use Multi-Stage Progress when named execution stages need a persistent track. Progressive Status is about earning detail over time.

Open this skill on its own page