Spinner

composant

What shows while something loads; phil-ux stills it under prefers-reduced-motion.

Aperçu

Clair

Loading the events

Code

<twig:Spinner label="Loading the events" />

Sombre

Loading the events

Code

<twig:Spinner label="Loading the events" />

Installation

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

Propriétés

Propriété	Type	Par défaut	Description
`label`	`string`	`'Loading'`	The accessible label announced to assistive technologies.

Accessibility

A status live region reading label.

Fichiers à copier

templates/components/Spinner.html.twig

{%- props
    ## string The accessible label announced to assistive technologies.
    label = 'Loading'
-%}
<span role="status" data-slot="spinner"{{ attributes.defaults({class: 'isSpinner'}) }}><span class="isVisuallyHidden">{{ label }}</span></span>