Spinner

A spinner using UnoCSS's animate-spin utility. Mostly here as a regression test (anything that depends on @keyframes is fragile in a build pipeline), but you can use it as a spinner.

Authoring

// recipes/spinner.config.ts
import { defineComponent } from 'varia'

export default defineComponent('spinner', {
  base: 'inline-block rounded-full border-current border-solid animate-spin',
  variants: {
    s: {
      sm: 'w-4 h-4 border-2 border-r-transparent',
      md: 'w-6 h-6 border-2 border-r-transparent',
      lg: 'w-10 h-10 border-4 border-r-transparent',
    },
    c: {
      primary: 'text-blue-600',
      muted: 'text-gray-400',
      danger: 'text-red-600',
    },
  },
})

A CSS-only spinner is a circle with a transparent right border that rotates. UnoCSS's animate-spin injects @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } into the generated CSS automatically, whenever any animate-spin class is referenced anywhere.

Live preview

Consumption

<div role="status" aria-label="Loading">
  <span class="spinner spinner-s-md spinner-c-primary"></span>
</div>

<button class="btn btn-c-primary btn-style-solid btn-s-md" disabled>
  <span class="spinner spinner-s-sm spinner-c-muted"></span>
  Saving...
</button>

Generated class names

Class	Purpose
spinner	Base + animate-spin (keyframes injected by UnoCSS)
spinner-s-sm / -md / -lg	Size + border thickness
spinner-c-primary / -muted / -danger	Color (via currentColor on the border)