Progress indicators

Indicatori di avanzamento di un’operazione

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Utilizza il componente Progress indicator quando hai necessità di mostrare l’avanzamento di un’operazione, come il caricamento di un file o l’invio dei dati di un modulo.

Alternative a questo componente

  • Notifications: per comunicare all’utente il risultato di un’operazione o un cambiamento di stato del sistema, senza necessità di mostrarne lo stato di avanzamento.

Come usarlo

  • La barra di avanzamento del componente deve aggiornarsi in tempo reale per riflettere correttamente il progresso dell'operazione.
  • Fornisci un feedback visivo quando l'operazione è completata utilizzando un breve testo o icona.
  • Considera l'uso di colori o animazioni per rendere l'indicatore di avanzamento più coinvolgente e informativo.

Attenzione a

  • Utilizzare la variante più adatta in base al contesto d’uso del componente.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

Anatomia

Gli elementi che formano il progress indicator

Il componente progress indicator è composto da:

  1. barra di avanzamento, il contenitore che indica il valore massimo di avanzamento e delimita la dimensione totale del componente;
  2. barra di progresso, indica fin dove è arrivato il progresso;
  3. etichetta (label), indica la percentuale di progresso. Non è presente nella variante Spinner.

Comportamento

  • Al clic su un pulsante di azione (call to action), il componente mostra il processo di avanzamento fino al suo completamento.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici