Spinner

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

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

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

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

Default

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

Size

<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

<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>