Spinner

The Spinner component provides an animated loading indicator for operations in progress. It communicates to users that content is loading or an action is being processed.

Features

• Four size variants (sm, md, lg, xl)
• Three color options (primary, secondary, accent)
• Smooth spin animation
• Accessible loading announcement
• Screen reader support

Usage

import { Spinner } from '@loke/design-system/spinner';

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

Tips:

• Use appropriate size based on context (sm for buttons, lg for page loading).
• Match spinner color to the surrounding UI context.
• Consider adding descriptive text alongside the spinner.

Props

Spinner

Examples

Basic spinner

<Spinner />

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Colors

<Spinner color="primary" />
<Spinner color="secondary" />
<Spinner color="accent" />

With text

<div className="flex items-center gap-2">
  <Spinner size="sm" />
  <span className="text-sm">Loading...</span>
</div>

Accessibility

• Uses output element for live region behavior.
• Includes aria-label="Loading" for screen reader announcement.
• Hidden visual label with screen reader text "Loading...".
• Communicates loading state to assistive technologies.

Best practices

• Use spinners for operations that take more than 300ms.
• Choose an appropriate size for the context (smaller in buttons, larger for page loads).
• Consider using skeleton loaders instead for content-heavy loading states.
• Add descriptive text when the loading context isn't obvious.
• Avoid multiple spinners on the same screen—it can be overwhelming.
• Use consistent spinner placement across similar interactions.
• Consider disabling interactive elements while loading.