Progress

A visual indicator that shows the completion status of a task or operation.

<twig:Progress value="33" />

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 Progress --kit shadcn

That's it!

Install the following Composer dependencies:

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

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

templates/components/Progress.html.twig

{# @prop value integer The progress value between 0 and 100, default to `0` #}
{%- props value = 0 -%}
<div
    class="{{ 'relative h-4 w-full overflow-hidden rounded-full bg-secondary ' ~ attributes.render('class')|tailwind_merge }}"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ value }}"
    {{ attributes }}
>
    <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-{{ 100 - value }}%)"></div>
</div>

Happy coding!

Usage

<twig:Progress value="33" />

Examples

Default

<twig:Progress value="33" />

With Label

<div class="flex flex-col gap-2 w-sm">
    <div class="flex items-center justify-between">
        <twig:Label>Loading</twig:Label>
        <span class="text-sm text-muted-foreground">33%</span>
    </div>
    <twig:Progress value="33" />
</div>

Different Values

<div class="flex flex-col gap-1.5 w-sm">
    <twig:Progress value="0" />
    <twig:Progress value="25" />
    <twig:Progress value="50" />
    <twig:Progress value="75" />
    <twig:Progress value="100" />
</div>

API Reference

Progress

Prop	Type	Description
`value`	`integer`	The progress value between 0 and 100, default to `0`