Spinner Props

Name	Type	Default	Description
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Ring diameter: 10px, 14px, 18px, or 28px.
shade	'default' | 'subtle' | 'onMedia' | 'inherit'	'default'	Color shade for light backgrounds, dark backgrounds, or inherited text color.
label	string	—	Text shown below the spinner. Also used as the accessible name.

Slots

• label: rich content below the spinner. Replaces the label prop text. The default accessible name is Loading.

Theme

.my-spinner {
  --astryx-spinner-color-accent: #0074e2;
}

• --astryx-spinner-diameter-{sm|md|lg|xl}: ring diameter per size.
• --astryx-spinner-stroke-width-{sm|md|lg|xl}: stroke width per size.
• --astryx-spinner-arc-fraction: fraction of the ring covered by the moving arc.
• --astryx-spinner-color-accent: arc color for the default shade.
• --astryx-spinner-color-subtle: arc color for the subtle shade.
• --astryx-spinner-color-track: track color for the default and subtle shades.
• --astryx-spinner-color-on-dark: arc and track color for the onMedia shade.
• --astryx-spinner-group-gap: space between the ring and the label.
• --astryx-spinner-label-color: label text color.