Skip to content
PHIL
Français

Progress

component

The progress of a task, on the native progress element: a value between zero and the maximum, or none while the end is unknown.

Preview

Light

Code 
<twig:Progress :value="64" aria-label="Upload of the photos" />

Dark

Code 
<twig:Progress :value="64" aria-label="Upload of the photos" />

Installation

php bin/console ux:install progress --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
value int|float|null null The progress, between 0 and the maximum; null while it is unknown.
max int|float 100 The value of a finished task.

Accessibility

The browser announces the value as a percentage, and a bar without a value as busy. Name it with aria-label or a Label. phil-ux stills the moving bar under prefers-reduced-motion.

Files to copy

templates/components/Progress.html.twig 
{#-
 # The native progress bar: a value kept between zero and the maximum, or none for a task whose end is unknown, which
 # the browser announces as busy.
 #}
{%- props
    ## int|float|null The progress, between 0 and the maximum; null while it is unknown.
    value = null,
    ## int|float The value of a finished task.
    max = 100
-%}
{%- set _max = max > 0 ? max : 100 -%}
<progress data-slot="progress" max="{{ _max }}"{% if value is not null %} value="{{ max(0, min(_max, value)) }}"{% endif %}{{ attributes }}></progress>