Activity Indicator

Selectors

.activity-indicator: Spinning indicator with 12 radial spokes.
.activity-indicator-sm: Small size (16px).
.activity-indicator-md: Medium size (37px).
.activity-indicator-lg: Large size (100px).

Sizes

HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="activity-indicator activity-indicator-sm" role="status" aria-label="Loading"></span>
  <span class="activity-indicator" role="status" aria-label="Loading"></span>
  <span class="activity-indicator activity-indicator-md" role="status" aria-label="Loading"></span>
  <span class="activity-indicator activity-indicator-lg" role="status" aria-label="Loading"></span>
</div>

Button

HTML

<div class="flex flex-wrap items-center gap-4">
  <button class="btn-gray" disabled>
    <span class="activity-indicator activity-indicator-sm"></span>
    Loading…
  </button>
  <button class="btn-tinted" disabled>
    <span class="activity-indicator activity-indicator-sm"></span>
    Please wait
  </button>
  <button class="btn-filled" disabled>
    <span class="activity-indicator activity-indicator-sm"></span>
    Processing
  </button>
</div>

Accessibility

When used standalone, add role="status" and aria-label so screen readers announce the loading state. When inside a button with visible text, no extra attributes are needed.

<!-- Standalone spinner -->
<span class="activity-indicator" role="status" aria-label="Loading…"></span>

<!-- Inside button (no extra aria needed) -->
<button disabled>
  <span class="activity-indicator activity-indicator-sm"></span>
  Loading…
</button>

Color

The spinner inherits currentColor. Customize by setting the text color on the parent element.

<div class="text-destructive">
  <span class="activity-indicator"></span> Error…
</div>