Spinner
Show that work is in progress where the surrounding component has no loading state of its own.
<script setup lang="ts">import { UiSpinner } from 'grani'</script> <template> <!-- Decoration: no name, the words or the host say what is going on. --> <UiSpinner class="h-3 w-3" /> <UiSpinner /> <UiSpinner class="h-6 w-6" /> <UiSpinner class="h-8 w-8" /></template>
Also called loader, loading indicator, activity indicator.
Usage
<UiSpinner /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Decision | What it does |
|---|---|
| Size | It is 16px unless the host sets h-* or size-*. It has no props. |
| Placement | It is the loading state of buttons, badges, switches, rows, selects, list fields, uploads, toasts and chart cards. |