Spinner

An indicator that can be used to show a loading state.

Examples

Default

<c-spinner></c-spinner>

Size

Use the size prop to change the size of the spinner.

<div class="flex items-center gap-8">
  <c-spinner size="16"></c-spinner>
  <c-spinner size="24"></c-spinner>
  <c-spinner size="32"></c-spinner>
  <c-spinner size="48"></c-spinner>
</div>

Color

Use the spinner-classes prop with text-* utility classes to change the color of the spinner.

<div class="flex items-center gap-8">
  <c-spinner size="24"></c-spinner>
  <c-spinner size="24" spinner-classes="text-primary"></c-spinner>
  <c-spinner size="24" spinner-classes="text-destructive"></c-spinner>
  <c-spinner size="24" spinner-classes="text-muted-foreground"></c-spinner>
</div>

Button

Add a spinner to a button to indicate a loading state.

Processing... 
<c-button disabled>
  <c-spinner size="16"></c-spinner>
  Processing...
</c-button>

Badge

You can also use a spinner inside a badge.

Syncing Updating Loading 
<div class="flex items-center gap-4">
  <c-badge variant="secondary">
    <c-spinner size="12"></c-spinner>
    Syncing
  </c-badge>
  <c-badge variant="outline">
    <c-spinner size="12"></c-spinner>
    Updating
  </c-badge>
  <c-badge>
    <c-spinner size="12" spinner-classes="text-primary-foreground"></c-spinner>
    Loading
  </c-badge>
</div>

API Reference

Spinner

The Spinner component displays an animated loading indicator using the Lucide loader-2 icon.

Prop Type Default Description
size string '16' Size of the component
spinner-classes string - Additional CSS classes for the element

The spinner automatically includes role="status" and aria-label="Loading" for accessibility.