View as Markdown

Progress

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

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

Installation

php bin/console ux:install progress --kit shadcn

Install the following Composer dependencies:

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

Copy the following file(s) into your app:

{# @prop value integer The progress percentage (0-100). #}
{%- props value = 0 -%}
&lt;div
    data-slot=&quot;progress&quot;
    role=&quot;progressbar&quot;
    aria-valuemin=&quot;0&quot;
    aria-valuemax=&quot;100&quot;
    aria-valuenow=&quot;{{ value }}&quot;
    class=&quot;{{ (&#039;relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes.without(&#039;class&#039;) }}
&gt;
    &lt;div
        data-slot=&quot;progress-indicator&quot;
        class=&quot;size-full flex-1 bg-primary transition-all&quot;
        style=&quot;transform: translateX(-{{ 100 - value }}%)&quot;
    &gt;&lt;/div&gt;
&lt;/div&gt;

Usage

<twig:Progress value="33" />

Examples

Label

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

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

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

<twig:Progress>

Prop Type Default
value 
 integer 0