{
  "title": "Spinner",
  "description": "Indeterminate loading indicator.",
  "url": "/docs/components/spinner",
  "since": "0.1.0",
  "tags": [
    "feedback",
    "loading"
  ],
  "platform": "both",
  "source": "---\ntitle: Spinner\ndescription: Indeterminate loading indicator.\nsince: 0.1.0\ntags: [feedback, loading]\nplatform: both\ncategory: feedback\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Spinner\" />\n\n## At a glance\n\n- Wraps RN `<ActivityIndicator>` on native; CSS animation on web.\n- Pair with a visible `label` whenever the spinner is the only signal that work is happening — short waits get away with the icon, long ones don't.\n\n## Preview\n\n<Preview name=\"spinner-basic\" />\n\n## Native preview\n\n<ExpoSnack component=\"Spinner\" height={250} />\n\n## `size`\n\nDiameter. Token sizes map to fixed pixel values; pass a number to\nescape the scale.\n\n| Value             | Diameter |\n|-------------------|----------|\n| `sm`              | 16 px    |\n| `md` (default)    | 24 px    |\n| `lg`              | 32 px    |\n| `<number>`        | Exact px |\n\n```tsx\n<Spinner size=\"sm\" />\n<Spinner size={48} />          // arbitrary\n```\n\n## `label`\n\nVisible (or screen-reader-only via i18n default) accessibility label.\nDefaults to \"Loading\" — override when the context demands a more\nspecific phrase (\"Saving…\", \"Submitting form…\") so screen readers say\nthe right thing.\n\n```tsx\n<Spinner label=\"Submitting…\" />\n```\n\n## `color`\n\nOverride the default theme color. Forwarded to the underlying\n`ActivityIndicator` (native) or CSS `border-color` (web). Pass a CSS\ncolor string.\n\n```tsx\n<Spinner color=\"#9333ea\" />\n```\n\n## Props\n\n<PropsTable component=\"Spinner\" />\n"
}