Overview

A Loading Indicator (Circle), also called a Spinner, communicates that content or an action is in progress.

It provides visual feedback during asynchronous operations, helping users understand that the system is working.

Variants: Determinate · Indeterminate

Status: Stable

Owner: Design System Team

When to Use / When Not to Use

Use when:

• Indicating loading or pending states for pages, sections, or components.
• Providing visual feedback during data fetch, save, or submit actions.
• Displaying progress when duration is short or indeterminate.

Avoid when:

• You can display exact progress — use Progress Bar instead.
• You want to show static system status — use Status Icon.
• The loading time is less than 500ms — skip the indicator to avoid flicker.

Anatomy