Spinner

Spinners indicate a loading or processing state inline in buttons, badges, and empty states.

Try it

Usage

import { RuiSpinner } from '@ecopages/radiant-ui/spinner';
 
<RuiSpinner />Copy

Place a spinner before button label text to indicate an in-flight action:

import { RuiButton } from '@ecopages/radiant-ui/button';
import { RuiSpinner } from '@ecopages/radiant-ui/spinner';
 
<RuiButton variant="filled" disabled>
  <RuiSpinner size="sm" class="mr-2" />
  Loading...
</RuiButton>Copy

Sizes

Use sm inside buttons and badges, md for standalone status, and lg for prominent loading regions.

Accessibility

• RuiSpinner renders role="status" with a default aria-label of Loading.
• Pair with visible text when the loading context is not obvious.

API

RuiSpinner is a presentational JSX view over a <span>, no custom element.

Props

CSS classes