Loading

Loading components communicate that the system is working. Prizma provides a spinner for indeterminate states and a progress bar for determinate ones. Both are used extensively in biometric capture and verification screens.

Try it live

Live — indeterminate spinner and determinate progress

Variants

Spinner.loading-spinner

Indeterminate. Use when the wait time is unknown — processing, uploading, verifying.

Progress bar.loading-progress

Determinate. Use when progress is measurable — multi-step flows, uploads with known size.

Tokens

TokenRoleLayer

--spinner-track-colorSpinner ring — background arcComponent

--spinner-fill-colorSpinner ring — active arcComponent

--loading-bar-trackProgress bar track backgroundComponent

--loading-bar-fillProgress bar fill colorComponent

--loading-bar-heightBar heightComponent

--radius-loading-barBar corner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.