# Spinner

Indicates a background process is active. Use Spinner for small, localized actions like button clicks.

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.spinner.content"
  source="components/dist/registries/dskit.json#spinner"
  schema={1}
/>

<ComponentTabs component={"spinner"} activeTab={"content"} />

## Content guidelines

### Loading indicator

#### When to use

During transitions, page loads, or background processes.

#### Style

- Use a loading message only when the wait is likely to exceed three seconds.
- Keep loading messages brief and present-tense. For example, `Loading datasets...`
- Do not use `Please wait`.

### Progress indicator

#### When to use

- For multi-step flows such as wizards or onboarding sequences.
- For file uploads or long-running background processes.

#### Style

- Label each step in a stepper with a short noun or verb phrase.
- Show current step and total step count. For example, `Step 2 of 4`.
- For upload progress, show percentage or file size transferred.