Spinner

The Spinner component displays a visual loading indicator while content or an action is in progress. It can be used to communicate that an operation is currently being processed or that content is loading.

import Spinner from "rocksolidjs/Spinner";

export default function Example() {
  return <Spinner />;
}

Examples

Colors

Use the color prop to communicate the context or status of a loading operation.

import Spinner from "rocksolidjs/Spinner";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <Spinner color="default" />
      <Spinner color="success" />
      <Spinner color="warning" />
      <Spinner color="info" />
      <Spinner color="error" />
    </div>
  );
}

Sizes

Use the size prop to control the size of the Spinner.

import Spinner from "rocksolidjs/Spinner";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <Spinner size="small" />
      <Spinner size="medium" />
      <Spinner size="large" />
    </div>
  );
}

Label

Use the label prop to provide accessible text that describes the loading state.

import Spinner from "rocksolidjs/Spinner";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Spinner label="Loading results" />
      <Spinner label="Saving" />
      <Spinner label="Processing payment" />
    </div>
  );
}

The default label is Loading. Use a more specific label when the loading operation has a clear purpose, such as Saving or Loading results.

Custom Styling

Use the class prop to apply custom CSS classes to the Spinner.

import Spinner from "rocksolidjs/Spinner";

export default function Example() {
  return <Spinner class="text-blue-800 dark:text-blue-500" />;
}

Use custom classes when you need to adjust the Spinner’s appearance to match a specific layout or design.

Accessibility

• Provide a meaningful label that describes what is currently loading when the default Loading label is not specific enough.
• Do not rely on the Spinner’s animation or color alone to communicate loading or status information.
• Ensure the Spinner has sufficient contrast against its background.
• Keep the loading label concise and descriptive.
• Use a Spinner alongside visible status text when users need additional context about a long-running operation.

API

Spinner

The Spinner component supports custom styling, semantic colors, sizes, and accessible loading labels.

Related Components

• Progress — Use Progress when the completion state of an operation can be measured.
• Skeleton — Use Skeleton to represent the structure of content while it is loading.