Spinner
An animated loading indicator.
Usage
A simple animated spinner component to indicate loading states.
Basic
<div class="flex items-center justify-center p-8"> <twig:ui:Spinner /> </div>
Size
<div class="flex items-center gap-6 justify-center p-8"> <twig:ui:Spinner size="sm" /> <twig:ui:Spinner size="md" /> <twig:ui:Spinner size="lg" /> <twig:ui:Spinner size="xl" /> </div>
Color
<div class="flex items-center gap-6 justify-center p-8"> <twig:ui:Spinner size="lg" class="text-red-500" /> <twig:ui:Spinner size="lg" class="text-green-500" /> <twig:ui:Spinner size="lg" class="text-blue-500" /> <twig:ui:Spinner size="lg" class="text-yellow-500" /> <twig:ui:Spinner size="lg" class="text-purple-500" /> </div>
Button
<div class="flex flex-col items-center gap-4 p-8"> <twig:ui:Button disabled size="sm"> <twig:ui:Spinner /> Loading... </twig:ui:Button> <twig:ui:Button variant="outline" disabled size="sm"> <twig:ui:Spinner /> Please wait </twig:ui:Button> <twig:ui:Button variant="secondary" disabled size="sm"> <twig:ui:Spinner /> Processing </twig:ui:Button> </div>
Badge
Syncing
Loading
Processing
<div class="flex items-center gap-4 justify-center p-8 [--radius:1.2rem]"> <twig:ui:Badge> <twig:ui:Spinner /> Syncing </twig:ui:Badge> <twig:ui:Badge variant="secondary"> <twig:ui:Spinner /> Loading </twig:ui:Badge> <twig:ui:Badge variant="outline"> <twig:ui:Spinner /> Processing </twig:ui:Badge> </div>
Input Group
Validating...
<div class="flex w-full max-w-md flex-col gap-4 p-8"> <twig:ui:InputGroup> <twig:ui:InputGroup:Input placeholder="Send a message..." disabled /> <twig:ui:InputGroup:Addon align="inline-end"> <twig:ui:Spinner /> </twig:ui:InputGroup:Addon> </twig:ui:InputGroup> <twig:ui:InputGroup> <twig:ui:InputGroup:Textarea placeholder="Send a message..." disabled /> <twig:ui:InputGroup:Addon align="block-end"> <twig:ui:Spinner /> Validating... <twig:ui:InputGroup:Button class="ml-auto" variant="default"> <twig:ux:icon name="lucide:arrow-up" /> <span class="sr-only">Send</span> </twig:ui:InputGroup:Button> </twig:ui:InputGroup:Addon> </twig:ui:InputGroup> </div>