Loading indicators
Marks an unmeasurable wait in a region: one spinning ring with an optional label, three ring styles, four sizes. The live region around it is yours.
Loading indicators
Marks an unmeasurable wait in a region: one spinning ring with an optional label, three ring styles, four sizes. The live region around it is yours.
Demo
Three real props: ring style, size, and label. Clear the label and the prop disappears from the snippet.
The snippet drops size at md
md, so the demo omits size while the picker sits there and emits it at sm, lg, and xl, the same way an empty label drops the prop. The copied code reproduces what you see either way.Contextual demo
A spinner holds a place, and its right size is decided by the hole it sits in — which needs a whole screen to show.
Every well in the preview is application markup
The family
One component, three ring styles, four sizes. There is nothing else in the directory.
| Component | Description | Import from |
|---|---|---|
| LoadingIndicator | A spinning ring and an optional label under it. Three ring styles, four sizes, and nothing else: no states, no children, no controls. | @/components/application/loading-indicator/loading-indicator |
The variant space
All 12 combinations the Figma sheet draws: three ring styles across four sizes. Every cell is live and spinning.
Size scales two things and leaves the rest alone
sm and md to 18px at lg and xl. The gap between them is 16px everywhere except xl, where it is 20px. That puts a labelled indicator at 68, 84, 100, and 112px tall, which is what the sheet’s four symbols measure on the Figma canvas. The size axis matches to the pixel. Inside the box, the ring is drawn per size since 2026-08-22 rather than scaled from one: r 14, 21, 25, and 29 with a 4, 6, 6, and 8px stroke (8px on dot-circle at lg), as the sheet’s symbols step it, so at xl the stroke paints 1px past the 64px box.With and without a label
The label is one optional string, and leaving it out removes it completely rather than collapsing it.
No label means no element
md: 84px tall with a label and 48px without, so the label costs its own line plus the gap and nothing is reserved for it when it is absent. Center the indicator in a well you control if you need the two to line up.States
There are none: nothing focuses, hovers, or reports. What changes is the surface beneath — only one ring paints a track.