SGDS Spinner Component Skill

<sgds-spinner> is the standard loading indicator. Use it to communicate that content is loading or an action is in progress.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Which tone?

• Default brand color (light backgrounds) → brand (default)
• Neutral / subdued → neutral
• On dark backgrounds → inverse
• Always light regardless of theme → fixed-light
• Always dark regardless of theme → fixed-dark