HySpinner

A visual loading indicator that shows an indeterminate spinning animation.

The spinner component displays an animated circular indicator to communicate that content is loading or a process is in progress. It's purely indeterminate— for showing progress percentages, use the Progress component instead.

Key Features:

• Three size variants (small, medium, large)
• Customizable colors via CSS custom properties
• Accessible with proper ARIA attributes
• CSS-based animation for performance
• SSR compatible

Accessibility Features:

• Uses role="status" for screen reader announcements
• Requires label prop for accessible name via aria-label
• High contrast and forced colors mode support
• Respects prefers-reduced-motion (stops animation)

When to Use:

• Loading content (< 10 seconds expected)
• Submitting forms
• Processing actions
• Fetching data

When NOT to Use:

• For determinate progress (use Progress component)
• For very long operations (use Progress with percentage)
• For page-level loading (consider skeleton screens)

Examples

Basic usage

<hy-spinner label="Loading"></hy-spinner>

Different sizes

<hy-spinner size="small" label="Loading"></hy-spinner>
<hy-spinner size="medium" label="Loading"></hy-spinner>
<hy-spinner size="large" label="Loading"></hy-spinner>

In a button

<hy-button disabled>
  <hy-spinner size="small" label="Saving"></hy-spinner>
  Saving...
</hy-button>

Methods

render()

Renders the spinner SVG with track and indicator circles.

The SVG uses a viewBox of 0 0 24 24 with circles at center (12, 12). The indicator uses stroke-dasharray and stroke-dashoffset for the partial arc appearance, animated via CSS.