Loading indicators
Every activity indicator built on vct-loader: variants, sizes, wait-row pairing, compact chrome, SSR overlay, and engine thinking. Layout skeletons (dash / search placeholders) are a different family — see Related.
Variants
square and line are the decorative pair (random picks one of those). rotate is opt-in for compact chrome (buttons, toasts, status rows).
Sizes
sm tracks 1em (compact chrome). md is the default. lg is the page / overlay mark.
| sm | md | lg | |
|---|---|---|---|
| square | |||
| line | |||
| rotate |
vct-wait
Inline-flex row that pairs the indicator with status copy. Used across home, play, dash, and settings so a wait is never a blank ellipsis.
Compact chrome
Buttons, result lists, and toasts use rotate sm. The loading toast stays up so you can inspect it (overlays demo morphs it to success).
SSR overlay
CanvasSsrLoading / AppSsrLoading: centered lg loader + status over the workspace until the island’s first paint. Shown frozen here (no dismiss script).
Lining up the chariots…
Waking the horses…
Engine thinking
EngineBusyWidth width-expands a square sm loader 0fr→1fr while the engine is searching (analysis panel, CBL Board tab, /computer). Loader color inherits currentColor (white on accent CTAs).
Related
Product wait rows and layout placeholders that are not this primitive.