HTML progress: mostrare l’avanzamento e lo stato indeterminato

HTML <progress> mostra la parte completata di un’attività. Imposta value e max per un avanzamento determinato, oppure ometti l’attributo value quando il lavoro totale è sconosciuto. L’elemento non misura automaticamente caricamenti o download.

Calcola il progresso con valore e massimo

il valore è l'importo completato e max è l'importo totale. Un valore di 20 con max 100 significa 20%; con max 200 significa 10%. Quando max è omesso, il suo valore predefinito è 1, quindi il 20% si scrive come value="0.2". Usa un numero valido maggiore di zero per max e un valore compreso tra zero e max.

Il minimo è sempre zero; il progresso non utilizza un attributo min. Considera meter per una misurazione all'interno di un intervallo, come l'utilizzo dello spazio di archiviazione o un punteggio. Usa progress per il completamento di un'attività in corso.

Esempio completo: aggiorna il progresso e passa a indeterminato

Salva questo codice come progress-demo.html e aprilo in un browser. I pulsanti modificano solo i valori visualizzati per esercitazione; non trasferiscono file.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Avanzamento e stato indeterminato</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Esercizio di avanzamento</h1>
  <label for="work">Avanzamento dell’attività di esempio</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% completato</p>
  <button type="button" id="advance">Passa all’80%</button>
  <button type="button" id="unknown">Totale sconosciuto</button>
  <button type="button" id="reset">Ripristina</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'In corso';
        status.textContent = 'In corso: la quantità totale di lavoro è sconosciuta.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% completato';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. Lo stato iniziale è completato al 20%. Clicca su Passa all’80% per modificare sia la barra sia la sua descrizione all'80%.
2. Clicca su Totale sconosciuto per rimuovere l'attributo value. Il browser mostra un progresso indeterminato insieme a una frase che spiega che il totale è sconosciuto.
3. Clicca su Ripristina per ripristinare l'attributo value e tornare al 20%.

value="0" rappresenta un progresso determinato senza lavoro completato; non è indeterminato. Per passare un elemento di progresso esistente a indeterminato, rimuovi l'attributo come nell'esempio. L'aspetto e l'animazione del progresso indeterminato possono variare a seconda del browser, del sistema operativo e delle impostazioni dell'utente.

Fornisci un nome del task e una frase di stato

Il testo “20%” all'interno della barra di avanzamento è un testo di riserva per i browser più vecchi, non un sostituto del nome del compito. Associa un'etichetta utilizzando valori corrispondenti di for e id, o fornisci un nome ARIA accessibile appropriato, per identificare il compito. Mostra lo stato corrente sia a parole sia attraverso il colore e la lunghezza della barra.

Per compiti reali, aggiorna il valore dalle informazioni fornite da un server o dagli eventi di trasferimento. Riempire una barra con un timer non indica che il lavoro sia completato. Progetta messaggi e azioni separati per errori, cancellazioni e completamenti, e controlla la frequenza degli annunci in modo che gli aggiornamenti di stato non si ripetano eccessivamente. Il riferimento MDN progress spiega la sintassi e i requisiti di accessibilità.