0Pricing
HTML Academy · Lezione

Gli elementi progress e meter

Mostrare valori di completamento e misurazione con HTML nativo

Gli elementi progress e meter è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento progress

L'elemento <progress> rappresenta il completamento di un'attività:

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

Avanzamento indeterminato

Senza un attributo value, l'avanzamento mostra un'animazione indeterminata:

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

Animare l'avanzamento con JavaScript

Aggiorni dinamicamente l'avanzamento:

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

L'elemento meter

L'elemento <meter> visualizza una misurazione scalare all'interno di un intervallo noto:

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

Attributi di meter

meter dispone di diversi attributi per definire gli intervalli ottimali e di avviso:

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

Stati di colore di meter

I browser assegnano un colore a meter in base ai valori low/high/optimum:

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

Utilizzo del disco con meter

Un caso d'uso classico di meter: l'utilizzo del disco o della memoria:

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

Robustezza della password con meter

Utilizzi meter per mostrare la robustezza della password:

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

Stilizzare progress e meter

Stile personalizzato per progress e meter:

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

Accessibilità di progress

Aggiunga attributi ARIA per migliorare il supporto ai lettori di schermo:

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

Riepilogo di progress e meter

Differenza fondamentale:

  • <progress> — completamento di un'attività nel tempo; il valore aumenta verso max; può essere indeterminato
  • <meter> — misurazione scalare statica; il valore è già noto; dispone di zone low/high/optimum

Quando utilizzare ciascun elemento

Guida ai casi d'uso:

  • progress — caricamento di file, procedura guidata per il completamento di un modulo, barra di caricamento
  • meter — utilizzo del disco, indicatore del carburante, punteggio di credito, livello della batteria, rilevanza dei risultati di ricerca

Verifica rapida

Quale elemento è appropriato per mostrare quanto è pieno un disco rigido?

Riepilogo: progress e meter

Elementi essenziali di progress e meter:

  • <progress max value> — completamento di un'attività; indeterminato senza value
  • <meter min max low high optimum value> — misurazione statica
  • Il browser assegna automaticamente un colore a meter in base alla posizione di optimum
  • Aggiunga aria-valuenow/min/max per il supporto ai lettori di schermo

Domande Frequenti

La lezione «Gli elementi progress e meter» è gratuita?

Sì — il testo completo di «Gli elementi progress e meter» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Gli elementi progress e meter»?

Mostrare valori di completamento e misurazione con HTML nativo Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Gli elementi progress e meter»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. aside: contenuto complementare
  2. figure e figcaption: approfondimento
  3. details e summary: widget di divulgazione
  4. Gli elementi progress e meter
← Torna a HTML Academy