Loading Indicator

Source: Figma · Reference: Clay docs. .loading-animation = ring spinner. .loading-animation-squares = paired squares (standalone, not composed). Sizes -xs/-sm/-md/-lg; colours -primary/-secondary/-light. Always aria-hidden="true".

Spinners — sizes xs / sm / md / lg

Spinners — primary / secondary

Spinners — light (on dark surface)

Squares loader — sizes xs / sm / md / lg

Squares loader — light (on dark surface)

Inside a button — aria-busy on the host