Spinner

Visual feedback for indeterminate wait times. Spinners signify that an operation is in progress.

Usage

Use Spinners when you don't know exactly how long an operation will take (e.g., fetching data, processing a payment). For measurable tasks, use the **Progress Bar** instead.

Content

Spinner Sizes

Standard scales for various contexts.

Small

Medium

Large

Spec

Color: Brand Primary (#D74D0F) with transparent top segment.
Animation: Infinite linear rotation (animate-spin).
Thickness: 2px (sm), 3px (md), 4px (lg).
Accessibility: Includes `role="status"` and screen-reader only text.

Anatomy

ROTATING CIRCLE