Spinner

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

Loading... 
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
    <twig:Item variant="muted">
        <twig:Item:Media>
            <twig:Spinner />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title class="line-clamp-1">Processing payment...</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Content class="flex-none justify-end">
            <span class="text-sm tabular-nums">$100.00</span>
        </twig:Item:Content>
    </twig:Item>
</div>

Installation

bin/console ux:install spinner --kit shadcn

That's it!

Install the following Composer dependencies:

composer require symfony/ux-icons tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Spinner.html.twig 
{%- props label = 'Loading' -%}

{{ ux_icon('lucide:loader-2', {
    'data-slot': 'spinner',
    'aria-label': label,
    role: 'status',
    class: 'size-4 animate-spin ' ~ attributes.render('class')|tailwind_merge,
    ...attributes.without('class'),
}) }}

Happy coding!

Usage

<twig:Button disabled>
    <twig:Spinner /> Please wait
</twig:Button>

Examples

Size

Use the size- utility class to change the size of the spinner.

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

Color

Use the text- utility class to change the color of the spinner.

Loading... 
<div class="flex items-center gap-6">
    <twig:Spinner class="size-6 text-red-500" />
    <twig:Spinner class="size-6 text-green-500" />
    <twig:Spinner class="size-6 text-blue-500" />
    <twig:Spinner class="size-6 text-yellow-500" />
    <twig:Spinner class="size-6 text-purple-500" />
</div>