← Vois design previews
Components · Job 13 · Loading state

Skeleton vs Spinner vs Progress

A full-page spinner gives no shape prediction and causes layout shift when content lands. Skeleton matches the shape of what's loading and reduces perceived wait. Spinner is for a short, inline action. Progress is for anything with a measurable duration.

Skeleton · page/content load

Matches the shape of the content that's about to render — no layout shift on load.

Spinner · inline, action in progress

Short-lived, no shape to predict — the button itself is the anchor.

Progress · measurable duration

62% · 3 of 5 files uploaded

Progress · terminal states

Disabled · queued, not started

Queued · waiting for the upload ahead of it

Success · complete

5 of 5 files uploaded

Error · upload failed

Upload failed at 2 of 5 files

The bar's fill color carries the terminal state so it reads at a glance without waiting for the caption — but color is never the only signal (DS-COLOR-003): the caption and, on error, the Retry button say the same thing in words.