StellarUI

<stellar-spinner>

Accessible loading indicator with a built-in spinner icon and optional custom slotted artwork.

Properties

Preview

The built-in spinner uses stellar-icon and can be changed with icon. Add slotted <img>, <svg>, or <stellar-icon> content to replace it entirely.

Markup

Copy

<stellar-spinner
  tone="primary"
  icon="svg-spinners:90-ring-with-bg"
  description="Syncing changes"
>
</stellar-spinner>

API

Complete props, events, slots, and implementation notes for the shipped spinner component.

Props

Prop	Type	Default
`tone`	`'' \| neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`label`	`string`	`''`
`description`	`string`	`''`
`icon`	`string`	`svg-spinners:90-ring-with-bg`

Events

Event	Source	Notes
custom events	none	`stellar-spinner` is a loading-status surface and does not emit custom events.

Slots

Slot	Notes
default	Optional custom spinner content. Use `<img>`, `<svg>`, or `<stellar-icon>` to replace the built-in spinner.

Notes

The public tag is `stellar-spinner`, and it keeps the shipped loading semantics while using a `stellar-icon` spinner for the built-in visual.
`label` is assistive-only and falls back to `Loading`; `description` is visible helper text and also maps to `aria-description`.
`tone` changes the current-color driven spinner and description color, `icon` changes the built-in spinner glyph, and sizing still follows the component's `font-size`.
Use the default slot to replace the built-in spinner with custom `<img>`, `<svg>`, or `stellar-icon` content without losing the `progressbar` semantics; slotted content overrides `icon`.