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

hero
Loading
type
size
import { LoadingIndicator } from "@/components/application/loading-indicator/loading-indicator"; <LoadingIndicator label="Loading" />

In context

in-context
View in a page

Types

matrix

Three ring styles across four sizes, all spinning.

Variants by size across the columns and type down the rows
smmdlgxl
line-simple
line-spinner
dot-circle

Layouts

cells
Loading projects
in block flow, centred in the parent
Loading projects
as a flex item, shrunk to the ring

Tones

cells

On bg-primary

line-simple
line-spinner
dot-circle

On bg-secondary

line-simple
line-spinner
dot-circle

Content

cells

Labelled

Loading projects
size sm, labelled
Loading projects
size md, labelled
Loading projects
size lg, labelled
Loading projects
size xl, labelled

The label prop

Loading projects
size md, label set
size md, no label, no element

Behaviour

cells
Loading your workspace and recent projects
a long label in a 200px column, wrapping
Loading your workspace and recent projects
the same label at the column's width, one line