Progress e meter element HTML5
HTML5 ha introdotto due elementi semantici per rappresentare valori numerici visivamente: <progress> per indicare avanzamento di un task e <meter> per indicare una misura scalare. Sono spesso confusi ma servono scopi diversi. Conoscere quando usare l'uno o l'altro migliora accessibilità e semantica del documento.
Progress vs Meter
<progress> rappresenta l'avanzamento di un'operazione in corso, da 0 al valore max (default 1). Tipicamente download, upload, esecuzione di un task lungo. <meter> invece rappresenta una misura statica all'interno di un range noto: ad esempio spazio disco usato, percentuale di completamento di un profilo utente, voto in una recensione. La distinzione è semantica e si riflette nell'accessibilità.
Sintassi
Progress: <progress value="50" max="100">50%</progress>. Senza value mostra un'animazione indeterminata. Meter: <meter value="7" min="0" max="10" low="3" high="8" optimum="10">7/10</meter>. Gli attributi low, high e optimum permettono al browser di colorare il meter in base alla posizione del valore rispetto ai range definiti (verde, giallo, rosso).
Stilizzazione cross-browser
Stilizzare progress e meter richiede pseudo-elementi specifici per ogni motore. Chrome/Safari: ::-webkit-progress-bar e ::-webkit-progress-value per progress, ::-webkit-meter-bar e ::-webkit-meter-optimum-value per meter. Firefox: ::-moz-progress-bar (un solo elemento). Per controllo totale spesso si usa un'appearance: none seguito da una catena di pseudo-elementi customizzati. Esistono librerie CSS pronte come progress.css o reset.css specifici per uniformare l'aspetto cross-browser. Per design system complessi, valuta componenti custom basati su div + ARIA.
Accessibilità e annunci
Screen reader annunciano progress e meter in modo diverso: "barra di avanzamento al 60 percento" per progress, "indicatore al 70 percento di 100" per meter. Aggiungi aria-valuetext per testi custom: aria-valuetext="60 file su 100 caricati". Per progress indeterminato (senza value) lo screen reader annuncia "in caricamento", confermando comportamento atteso. Combina con role="status" o aria-live="polite" se vuoi che ogni aggiornamento venga annunciato, utile per task lunghi dove l'utente attende feedback periodici sul progresso.
Indeterminate progress
Progress senza attributo value mostra un'animazione indeterminata che indica un'operazione in corso di durata sconosciuta. Esempio: <progress></progress> sopra una sezione in caricamento. Browser anima automaticamente la barra. Quando hai feedback sul progresso aggiorna value e max per passare dalla modalità indeterminata a quella concreta. Pattern comune in spinner UX: indeterminato finché non si sa la durata, determinato non appena il server fornisce dimensione del file in download. Smooth transition tra i due stati migliora la percezione di sistema reattivo e affidabile.
Use case meter
Meter è utile in dashboard SaaS per mostrare quote (storage, API calls, banda) con codifica colore automatica. Per ecommerce, indica disponibilità prodotto rispetto a soglie. Per HR, mostra avanzamento di obiettivi annuali. La sintassi semplice e l'accessibilità nativa lo rendono perfetto per indicatori statici, ben distinto da progress che è destinato a operazioni in corso. Aggiungi sempre etichette descrittive: il valore numerico da solo è insufficiente per chi usa screen reader, abbina sempre testo descrittivo prima o dopo il meter.
Meter eccelle per: spazio disco usato/totale, percentuale di completamento profilo utente, voto in recensioni (3.5/5), barra di forza password, capacità di gruppo evento (15/30 partecipanti), batterie residue, ratings vari. La capacità di colorare automaticamente in base ai range low/high/optimum aggiunge feedback visivo immediato: rosso quando "basso" o "alto" rispetto all'optimum, verde quando vicino all'optimum. Personalizzabile via CSS per allinearsi al design system aziendale. Da non usare per task in corso (quello è progress), per misure statiche o pseudo-statiche meter è la scelta semanticamente corretta.
Esempi pratici
Progress per upload file: input file con event change, FileReader per progresso, progress element che riflette percentage. xhr.upload.onprogress restituisce evento con loaded/total per calcolare percentuale. Aggiorna progress.value periodicamente. Meter per password strength: input password con event input, calcola entropy della password, meter mostra forza (0-100) con range low/optimum. Visivamente: barra rossa fino a 30 (debole), gialla 30-60 (media), verde 60+ (forte). Combinato con feedback testuale ("Aggiungi maiuscole e numeri"), guida l'utente verso scelte sicure. Pattern noto e apprezzato negli ecommerce e nelle registrazioni di servizi importanti.
Procedura passo-passo
- Identifica se hai un task in corso (progress) o una misura statica (meter).
- Per upload usa <progress value="..." max="100"> aggiornato via JavaScript.
- Per stato indeterminato omette value: <progress></progress>.
- Per spazio disco usa <meter value="60" max="100" high="80">60% usato</meter>.
- Aggiungi sempre testo fallback all'interno del tag per browser legacy.
- Personalizza l'aspetto con CSS appearance: none + pseudo-elementi browser-specific.
- Per accessibilità integra con aria-valuetext per descrizioni custom.
Errori comuni e come risolverli
- Usare progress per misure statiche: semanticamente sbagliato; usa meter.
- Stilizzazione cross-browser: i pseudo-elementi differiscono tra Chrome e Firefox; testa entrambi.
- Mancanza di fallback testuale: utenti con browser legacy o screen reader necessitano di un'alternativa.
- Min/max errati: meter senza max usa default 1 e i valori vengono normalizzati; specifica esplicitamente.
- Confondere optimum con max: optimum indica il valore "buono", non quello massimo possibile.
Domande frequenti
D: Progress senza value mostra cosa?
R: Un'animazione indeterminata, ideale per task di durata sconosciuta come connessioni in attesa.
D: Meter può essere usato per percentuali generiche?
R: Sì, è perfetto per qualunque misura entro un range definito.
D: Posso colorare progress in base al valore?
R: Sì, via CSS con regole condizionali e pseudo-elementi specifici (::-webkit-progress-value, ::-moz-progress-bar).
D: Differenza accessibility?
R: Screen reader annunciano i due elementi diversamente, comunicando "task in corso" o "misura". La distinzione semantica conta.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.