0Pricing
HTML Academy · Lektion

Die Elemente progress und meter

Zeigen Sie Fortschritt und Messwerte mit nativem HTML an

Die Elemente progress und meter ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das progress-Element

Das <progress>-Element stellt den Abschluss einer Aufgabe dar:

<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 -->

Unbestimmter Fortschritt

Ohne einen value-Wert zeigt progress eine Animation mit unbestimmtem Fortschritt:

<!-- 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>

Fortschritt mit JavaScript animieren

Fortschritt dynamisch aktualisieren:

<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>

Das meter-Element

Das <meter>-Element zeigt eine Skalarmessung innerhalb eines bekannten Wertebereichs an:

<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
-->

Attribute von meter

meter verfügt über mehrere Attribute zur Definition von Optimal- und Warnbereichen:

<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>

Farbstufen von meter

Browser färben meter abhängig von low/high/optimum unterschiedlich ein:

<!-- 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>

Festplattennutzung mit meter

Ein klassischer Anwendungsfall für meter: Festplatten- oder Speichernutzung:

<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>

Passwortstärke mit meter

Verwenden Sie meter, um die Passwortstärke anzuzeigen:

<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>

progress und meter gestalten

Individuelle Gestaltung von progress und 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; }

Barrierefreiheit von progress

Fügen Sie ARIA-Attribute hinzu, damit Screenreader die Inhalte besser unterstützen:

<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>

Zusammenfassung: progress und meter

Der wesentliche Unterschied:

  • <progress> — Aufgabenfortschritt im Zeitverlauf; der Wert steigt bis zum Maximum; kann unbestimmt sein
  • <meter> — statische Skalarmessung; der Wert ist bereits bekannt; verfügt über low/high/optimum-Bereiche

Wann welches Element verwenden

Leitfaden zu den Anwendungsfällen:

  • progress — Datei-Upload, Assistent zum Ausfüllen eines Formulars, Ladebalken
  • meter — Festplattennutzung, Tankanzeige, Bonitätsbewertung, Akkustand, Relevanz von Suchergebnissen

Schnelltest

Welches Element eignet sich, um anzuzeigen, wie voll eine Festplatte ist?

Zusammenfassung: progress und meter

Die wichtigsten Grundlagen von progress und meter:

  • <progress max value> — Aufgabenfortschritt; ohne value unbestimmt
  • <meter min max low high optimum value> — statische Messung
  • Der Browser färbt meter automatisch abhängig von der Position von optimum ein
  • Fügen Sie aria-valuenow/min/max hinzu, damit Screenreader die Inhalte besser unterstützen

Häufig gestellte Fragen

Ist die Lektion „Die Elemente progress und meter“ kostenlos?

Ja — der vollständige Text von „Die Elemente progress und meter“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Die Elemente progress und meter“?

Zeigen Sie Fortschritt und Messwerte mit nativem HTML an Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Die Elemente progress und meter“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. aside: ergänzende Inhalte
  2. figure und figcaption erneut betrachtet
  3. details und summary: Aufklappkomponente
  4. Die Elemente progress und meter
← Zurück zu HTML Academy