shadcn.io is an independent project built on shadcn/ui
A line reads Processing your request, then a 12px spinner. The words come first. Nothing in the file is processing.
Put the words first when the message matters more than the motion. A spinner before the words suits a status that leads with motion. A known percent fits Progress. In Svelte, Ark UI does not know when the work ends. You hide the spinner.
Installation
Anatomy
Usage
<p class="flex items-center gap-2 text-sm">Processing your request<Spinner class="size-3" /></p>FAQ
Why does the spinner come after the words?
The paragraph's children are the text "Processing your request", then the Spinner. In a flex row that paints in DOM order, so the words lead and the wheel follows.
What size is the spinner after the text?
size-3, which is 12px. The default is size-4. The paragraph is text-sm, so the smaller icon sits with that line.
How are the words and the spinner aligned?
The p is flex items-center gap-2 text-sm. items-center lines the icon up with the text, and gap-2 is the space between them.
What color is the spinner here?
The paragraph sets no text color, and the Spinner sets none either. The icon uses currentColor, so it matches the paragraph. Add text-muted-foreground on the p to mute both.
API Reference
Spinner
No extra props in this demo. The rest is on the Spinner page.
