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, run the following command to install the component and its dependencies:

$ bin/console ux:install spinner --kit shadcn

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

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'),
}) }}

If necessary, install the following Composer dependencies:

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

And the most important, enjoy!

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>