Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

<twig:Progress value="56" class="w-[60%]" />

Installation

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 percentage (0-100). Defaults to `0` #}
{%- props value = 0 -%}
<div
    data-slot="progress"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ value }}"
    class="{{ ('relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes.without('class') }}
>
    <div
        data-slot="progress-indicator"
        class="size-full flex-1 bg-primary transition-all"
        style="transform: translateX(-{{ 100 - value }}%)"
    ></div>
</div>

Happy coding!

Usage

<twig:Progress value="33" />

Examples

Label

Use a Field component to add a label to the progress bar.

<twig:Field class="w-full max-w-sm">
    <twig:Field:Label for="progress-upload">
        <span>Upload progress</span>
        <span class="ml-auto">56%</span>
    </twig:Field:Label>
    <twig:Progress value="56" id="progress-upload" />
</twig:Field>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

<div class="flex flex-col gap-8 w-full items-center">
    {# Arabic #}
    <twig:Field class="w-full max-w-sm" dir="rtl">
        <twig:Field:Label for="progress-upload-ar">
            <span>تقدم الرفع</span>
            <span class="ms-auto">٥٦%</span>
        </twig:Field:Label>
        <twig:Progress value="56" id="progress-upload-ar" class="rtl:rotate-180" />
    </twig:Field>
    {# Hebrew #}
    <twig:Field class="w-full max-w-sm" dir="rtl">
        <twig:Field:Label for="progress-upload-he">
            <span>התקדמות העלאה</span>
            <span class="ms-auto">56%</span>
        </twig:Field:Label>
        <twig:Progress value="56" id="progress-upload-he" class="rtl:rotate-180" />
    </twig:Field>
</div>

API Reference

Component `Progress`

Prop	Type	Description
`value`	`integer`	The progress percentage (0-100). Defaults to `0`