SutraUI.Spinner (Sutra UI v0.3.0)

View Source

A loading indicator component.

The spinner provides visual feedback for loading states. It includes proper accessibility attributes for screen readers.

Sizes

  • sm - Small (12px)
  • default - Default (16px)
  • lg - Large (24px)
  • xl - Extra large (32px)

Accessibility

The component includes proper ARIA attributes:

  • role="status" indicates a live region
  • aria-label provides screen reader description
  • Visually hidden text for screen readers when no text slot is provided

Examples

# Basic spinner
<.spinner />

# With custom label
<.spinner label="Processing..." />

# Different sizes
<.spinner size="sm" />
<.spinner size="lg" />

# With visible text
<.spinner>
  <:text>Loading data...</:text>
</.spinner>

# In a button
<.button disabled>
  <.spinner size="sm" />
  Processing...
</.button>

Summary

Functions

spinner(assigns)

Renders a spinner component.

spinner_icon(assigns)

Renders just the spinner icon without wrapper.

Functions

spinner(assigns)

Renders a spinner component.

Attributes

  • size - Size variant. One of sm, default, lg, xl. Defaults to default.
  • label - Accessibility label for screen readers. Defaults to "Loading".
  • class - Additional CSS classes.

Slots

  • text - Optional visible text to display next to the spinner.

Attributes

  • size (:string) - Size variant. Defaults to "default". Must be one of "sm", "default", "lg", or "xl".
  • label (:string) - Accessibility label for screen readers. Defaults to "Loading".
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • text - Optional visible text to display.

spinner_icon(assigns)

Renders just the spinner icon without wrapper.

Useful in tight spaces like buttons where you need maximum layout control.

Examples

<.button disabled>
  <.spinner_icon size="sm" />
  Loading...
</.button>

Attributes

  • size (:string) - Size variant. Defaults to "default". Must be one of "sm", "default", "lg", or "xl".
  • label (:string) - Accessibility label for screen readers. Defaults to "Loading".
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.