Spinner

component

An indicator that can be used to show a loading state.

Install

php bin/console ux:install spinner \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (7)

Default

Light

Dark

Code

<twig:Spinner class="size-10" />

Size

Light

Dark

Code

<div class="flex items-center gap-6">
    <twig:Spinner />
    <twig:Spinner class="size-6" />
    <twig:Spinner class="size-8" />
</div>

Color

Light

Dark

Code

<div class="flex items-center gap-6">
    <twig:Spinner class="text-brand size-8" />
    <twig:Spinner class="text-danger size-8" />
    <twig:Spinner class="text-success size-8" />
    <twig:Spinner class="text-warning size-8" />
</div>

Alignment

Light

Dark

Code

<div class="w-full">
    <div class="text-left rtl:text-right">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="text-center">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="text-right rtl:text-left">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>

Spinner with card

Light

Dark

Code

<twig:Card class="max-w-sm relative">
    <twig:Card:Header aria-hidden="true">
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content aria-hidden="true">
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>

    <div class="absolute inset-0 rounded-[inherit] bg-neutral-primary-soft/80"></div>
    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
        <twig:Spinner class="size-8 text-brand"/>
        <span class="sr-only">Loading...</span>
    </div>
</twig:Card>

Progress spinner

Light

Dark

Code

<div>
    <h2 class="mb-4 text-lg font-medium text-heading">Converting your image:</h2>
    <ul class="max-w-md space-y-3 text-body list-inside">
        <li class="flex items-center">
            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
            Upload your file to our website
        </li>
        <li class="flex items-center">
            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
            Choose your file format
        </li>
        <li class="flex items-center">
            <div role="status">
                <twig:Spinner class="size-4 text-brand me-2"/>
                <span class="sr-only">Loading...</span>
            </div>
            Preparing your file
        </li>
    </ul>
</div>

Buttons

Light

Dark

Code

<div>
    <twig:Button variant="tertiary">
        <twig:Spinner class="me-2 text-brand" />
        Loading...
    </twig:Button>
</div>