Spinners

Spinners are what an interface shows while it waits: a shape moving at a constant rate to say work is in flight without pretending to know when it ends.

Get Pro to installPro15 blocksReact, Vue and Figma

MCP

Preparing your workspace

Usually a few seconds

Syncing 12 projects

Usually under 10 seconds

Checking permissions

Usually a few seconds

Every block in the set#

Spinner

Work with no measurable end: a request in flight, a permission check

Spinner, morph

A spinner that should end in an answer, in a row, a section or a button

Spinner, ticks

A long wait that should visibly move on

Progress circle

Limits and quotas: a ring small enough to sit in a row and still carry its own number

Progress circle, morph

One limit at a time, with its detail

Progress circle, ticks

Usage you can count

Progress bar

A long job with a real end: an import, a migration, a download

Progress bar, morph

A job whose whole progress is the one number

Progress bar, ticks

A job where small changes should be countable

Percentage indicator

The one number a full-screen or blocking wait is about

Percentage indicator, morph

A blocking wait where the card itself is the bar

Percentage indicator, ticks

A blocking wait that wants a scale to read against

Processing panel

A job with named steps, where the wait needs to say what it is doing, not just that it is

Processing panel, morph

A job where only the running step needs attention

Processing panel, ticks

A job where the timeline and the history both matter

When to use#

A request whose duration you cannot estimate: an auth check, a permission lookup
A button that has been submitted and must not be pressed a second time
A quota ring small enough to sit inside a list row and still carry its number
A blocking wait where one number is the entire message

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans