OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Spinner

Displays a progress indicator for indeterminate tasks.

 <Spinner />

API Reference

Prop	Type	Default
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`

This component is based on the span element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source

If the task’s progress is known or its duration can be estimated, use the Progress component.

Examples

Sizes

Use the size prop to control the size of the spinner. You can change the spinner size across breakpoints using the object syntax.

 <Flex align="center" gap="4">
  <Spinner size="1" />
  <Spinner size="2" />
  <Spinner size="3" />
</Flex>

The spinner sizes match available form element sizes in the design system.

 <Flex align="center" gap="4">
  <TextField.Root size="1" defaultValue="horsebatterystaple" type="password">
    <TextField.Slot side="right">
      <Spinner size="1" />
    </TextField.Slot>
  </TextField.Root>

  <TextField.Root size="2" defaultValue="horsebatterystaple" type="password">
    <TextField.Slot side="right">
      <Spinner size="2" />
    </TextField.Slot>
  </TextField.Root>

  <TextField.Root size="3" defaultValue="horsebatterystaple" type="password">
    <TextField.Slot side="right">
      <Spinner size="3" />
    </TextField.Slot>
  </TextField.Root>
</Flex>