Spinner

Spinner indicates that an operation is in progress. Use visible loading text when possible; if the spinner is the only loading indicator, give it an accessible name or place it in a status region.

Basic usage

Code

<div className="tw:flex tw:items-center tw:gap-4">
  <Spinner className="tw:size-4" />
  <Spinner className="tw:size-6" />
  <Spinner className="tw:size-8" />
  <Spinner className="tw:size-10" />
</div>

With status text

Code

<div aria-live="polite" className="tw:flex tw:items-center tw:gap-2">
  <Spinner className="tw:size-4" aria-hidden="true" />
  <span className="tw:text-sm tw:text-muted-foreground">Loading orders...</span>
</div>

API

Spinner

No documented props