Loading Indicator

Animated feedback components that communicate an in-progress state. Three visual variants — ring, dotted, and square — each available in four sizes, with optional label support.

Variants

Three distinct animation styles: a spinning ring arc, three bouncing dots, and three bouncing squares.

Line

Dotted

Square

Line — sizes

Four sizes from compact inline use to full-page loading screens.

Dotted — sizes

Three staggered-bounce dots that scale with the same four size steps.

Square — sizes

Three rounded-corner squares with the same staggered-bounce rhythm.

With label

An optional text label is rendered below the indicator — useful for full-page or skeleton loading states where context helps the user.

With label — all sizes

The label scales with the indicator size so text and spinner remain visually balanced.