Spinner

A loading indicator component to show pending states.

Import

import { Spinner } from "heroui-solid";

Usage

1
2
3
4
5
6
7
8
9import { Spinner } from "heroui-solid"

export function SpinnerBasic() {
  return (
    <div class="flex items-center gap-4">
      <Spinner />
    </div>
  )
}

Colors

Current

Accent

Success

Warning

Danger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28import { Spinner } from "heroui-solid"

export function SpinnerColors() {
  return (
    <div class="flex items-center gap-8">
      <div class="flex flex-col items-center gap-2">
        <Spinner color="current" />
        <span class="text-xs text-muted">Current</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner color="accent" />
        <span class="text-xs text-muted">Accent</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner color="success" />
        <span class="text-xs text-muted">Success</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner color="warning" />
        <span class="text-xs text-muted">Warning</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner color="danger" />
        <span class="text-xs text-muted">Danger</span>
      </div>
    </div>
  )
}

Sizes

Small

Medium

Large

Extra Large

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import { Spinner } from "heroui-solid"

export function SpinnerSizes() {
  return (
    <div class="flex items-center gap-8">
      <div class="flex flex-col items-center gap-2">
        <Spinner size="sm" />
        <span class="text-xs text-muted">Small</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner size="md" />
        <span class="text-xs text-muted">Medium</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner size="lg" />
        <span class="text-xs text-muted">Large</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <Spinner size="xl" />
        <span class="text-xs text-muted">Extra Large</span>
      </div>
    </div>
  )
}

Styling

Passing Tailwind CSS classes

import { Spinner } from "heroui-solid";

function CustomSpinner() {
  return <Spinner class="text-blue-500" />;
}

Customizing the component classes

To customize the Spinner component classes, you can use the @layer components directive. Learn more.

@layer components {
  .spinner {
    @apply animate-spin;
  }

  .spinner--accent {
    color: var(--accent);
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Spinner component uses these CSS classes (View source styles):

Base & Size Classes

.spinner - Base spinner styles with default size
.spinner--sm - Small size variant
.spinner--md - Medium size variant (default)
.spinner--lg - Large size variant
.spinner--xl - Extra large size variant

Color Classes

.spinner--current - Inherits current text color
.spinner--accent - Accent color variant
.spinner--danger - Danger color variant
.spinner--success - Success color variant
.spinner--warning - Warning color variant

API Reference

Spinner Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the spinner
`color`	`"current" \| "accent" \| "success" \| "warning" \| "danger"`	`"accent"`	Color variant of the spinner
`class`	`string`	-	Additional CSS classes

Last updated: 7/19/26, 3:27 AM