Skip to content
Pinky UI

loading

Circular Progress Morph

A compact spinner-to-percentage-to-check task indicator.

  • loading
  • progress
  • upload
  • status

Live preview

68%
✓

Quick usage

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

<CircularProgressMorph value={72} state="progress" />

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

Use one compact surface for active work, bounded percentage, and completed check.

Use when

Uploads or background tasks need a small status near their source.

Avoid

Ambiguous gauges, decorative spinners, or percent values that are not real.

Accessibility

Use progressbar semantics for determinate values and status semantics for indeterminate work.

Keyboard and touch

Keep cancellation or retry actions separate and reachable.

Reduced motion and performance

Stop the spinner on completion and disable animation under reduced motion.

Composition and anti-patterns

Use AsyncButton for the initiating action and Inline Feedback for errors.

Open this skill on its own page