Orvain UI

Processing panel, morph

A job where only the running step needs attention.

Get Pro to installPro15 blocksReact, Vue and Figma
MCPConnect the MCP server

Generating September report

Elapsed

  1. Collecting transactions
    of 18,204 records2,791 records/s
  2. Reconciling against ledger
    of 4,812 rows
  3. Rendering the PDF
    of 36 pages

More in Spinners#

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 BlocksSee plans