Spinner

Indicatore di caricamento animato per stati di attesa. Puro CSS Tailwind — nessun file .css dedicato.

Comportamento

Il componente renderizza un <div role="status"> (live region polite) con layout grid centrato, contenente:

L’icona SVG spinner (@icon#spinner) con aria-hidden="true" — puramente decorativa
Un’etichetta testuale (rtds-spinner__label) — visibile o rtds-sr-only

Il layout grid (rtds-grid rtds-justify-center rtds-justify-items-center rtds-gap-8) centra orizzontalmente icona ed etichetta e li impila con gap uniforme. Il padding verticale è configurabile via param padding (default rtds-py-20).

L’etichetta può essere qualsiasi tag di blocco: <p> (default per with-label), <h2>, <h3>. Usare un heading solo se il componente è l’elemento di stato principale della sezione corrente; in tutti gli altri casi usare <p>.

Varianti

Varianti di Etichetta

default: etichetta nascosta visivamente (rtds-sr-only), disponibile agli AT
with-label: etichetta visibile con tag <p> (o quello indicato da labelTag)
with-label-heading: etichetta visibile con tag <h2> (o quello indicato da labelTag)

Varianti di Dimensione

La dimensione dell’icona è configurabile via iconSize (default rtds-w-8 rtds-h-8):

Uso	`iconSize`
Piccolo	`rtds-w-5 rtds-h-5`
Medio (default)	`rtds-w-8 rtds-h-8`
Grande	`rtds-w-12 rtds-h-12`

Parametri di configurazione

Parametro	Tipo	Obbligatorio	Default	Descrizione
`srLabel`	stringa	no	`'Caricamento in corso...'`	Testo dell’etichetta — visibile o sr-only
`labelTag`	`'p'` \| `'h2'` \| `'h3'`	no	`'p'` / `'h2'`	Tag HTML dell’etichetta (with-label: `p`; with-label-heading: `h2`)
`iconSize`	stringa	no	`'rtds-w-8 rtds-h-8'`	Classi Tailwind per la dimensione dell’icona spinner
`padding`	stringa	no	`'rtds-py-20'`	Classe Tailwind per il padding verticale del wrapper (es. `rtds-py-10`, `rtds-py-0`)
`classes`	stringa	no	—	Classi CSS aggiuntive sul wrapper

Accessibilità

WCAG 2.2

Livello AA — criteri pertinenti:

1.4.1 Uso del colore — l’animazione non dipende solo dal colore per comunicare lo stato
4.1.3 Messaggi di stato — role="status" comunica il caricamento alle AT con annuncio polite

Struttura e semantica

<div role="status"> — live region polite; AT annuncia il contenuto testuale al termine della lettura corrente
L’icona spinner SVG ha aria-hidden="true" — è decorativa; il nome accessibile è fornito dall’etichetta
L’etichetta con rtds-sr-only è visivamente nascosta ma rimane nell’albero di accessibilità

Scelta del tag etichetta

Contesto	Tag consigliato
Spinner inline (bottone, campo, lista)	`<p>` + `srLabel` sr-only (variante default)
Spinner come elemento di stato principale della vista	`<p>` con label visibile (variante with-label)
Spinner associato a un titolo di sezione	`<h2>` o `<h3>` (variante with-label-heading)

Stili CSS

Il componente non ha un file .css dedicato. Tutti gli stili sono utility Tailwind:

Classe	Applicata a	Scopo
`rtds-spinner`	Wrapper	Hook semantico; porta `role="status"`
`rtds-grid`	Wrapper	Layout grid per impilare icona ed etichetta
`rtds-font-bold`	Wrapper	Peso testo in grassetto per l’etichetta
`rtds-text-center`	Wrapper	Allineamento testo centrato
`rtds-gap-8`	Wrapper	Spazio tra icona ed etichetta
`rtds-justify-center`	Wrapper	Centra le tracce del grid sull’asse inline
`rtds-justify-items-center`	Wrapper	Centra gli item del grid sull’asse inline
`rtds-py-20`	Wrapper	Padding verticale default (sovrascrivibile via `padding`)
`rtds-spinner--with-label`	Wrapper	Modificatore variante con etichetta visibile
`rtds-spinner__label`	Etichetta	Hook semantico; nessuno stile proprio
`rtds-sr-only`	Etichetta	Nasconde visivamente nella variante default

Esempi di utilizzo

<!-- Etichetta sr-only (uso tipico: spinner inline senza testo visibile) -->
<div class="rtds-spinner rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20" role="status">
  <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
    <use href="./icons.svg#spinner" />
  </svg>
  <span class="rtds-spinner__label rtds-sr-only">Caricamento in corso...</span>
</div>

<!-- Etichetta visibile con <p> -->
<div class="rtds-spinner rtds-spinner--with-label rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20" role="status">
  <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
    <use href="./icons.svg#spinner" />
  </svg>
  <p class="rtds-spinner__label">Caricamento in corso...</p>
</div>

<!-- Etichetta visibile con <h2> (sezione di caricamento principale) -->
<div class="rtds-spinner rtds-spinner--with-label rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20" role="status">
  <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
    <use href="./icons.svg#spinner" />
  </svg>
  <h2 class="rtds-spinner__label">Caricamento risultati</h2>
</div>

<!-- Icona grande (rtds-w-12 rtds-h-12) con padding ridotto -->
<div class="rtds-spinner rtds-spinner--with-label rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-10" role="status">
  <svg class="rtds-icon rtds-fill-current rtds-w-12 rtds-h-12 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
    <use href="./icons.svg#spinner" />
  </svg>
  <p class="rtds-spinner__label">Caricamento in corso...</p>
</div>

Note

Il componente usa l’icona SVG #spinner dallo sprite icons.svg — verificare che lo sprite sia disponibile nel contesto di integrazione
role="status" implica aria-live="polite": inserire il componente nel DOM solo quando il caricamento ha effettivamente inizio; rimuoverlo al termine
Per stati di caricamento contestuali a sezioni specifiche, abbinare aria-busy="true" sul contenitore della sezione interessata

Spinner: With Label