spinner

CSS-animated loading ring. No JavaScript required. Use to indicate background activity — inside buttons, next to labels, or as a full-area overlay.

Sizes

spinner({ size: 'sm' })
spinner({ size: 'md' })
spinner({ size: 'lg' })

spinner({ color: 'accent' })
spinner({ color: 'muted'  })
spinner({ color: 'white'  })

Pair with a button() to show loading state. Pass the spinner as the button's icon prop.

button({
  label:    'Saving',
  icon:     spinner({ size: 'sm', color: 'white' }),
  disabled: state.loading,
})

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`	1rem / 1.5rem / 2.5rem
`color`	`accent \| muted \| white`	`accent`
`label`	string	`Loading…`	Sets `aria-label` on the `role="status"` element
`class`	string	—