Tag <progress>

Tag <progress>

Definition

Status: Aktueller Standard

Das Tag <progress> steht für progress (Fortschritt).

Das HTML-Element <progress> stellt den Fortschritt eines laufenden Vorgangs dar, z. B. bei Uploads, Downloads, Installationen oder anderen Aufgaben mit messbarem Fortschritt. Es wird im Browser standardmäßig als klassischer Fortschrittsbalken dargestellt. Das Element zeigt den Fortschritt nur an; die eigentliche Berechnung und Aktualisierung des value-Attributs erfolgt in der Regel über JavaScript.

Das Element kennt zwei grundlegende Zustände:

Bestimmter Zustand (Determinate):

Wenn bekannt ist, wie viel der Aufgabe bereits erledigt ist. Hierfür werden die Attribute value und max verwendet.

Unbestimmter Zustand (Indeterminate):

Wenn die Dauer der Aufgabe unbekannt ist. In diesem Fall fehlen die Attribute, und der Balken zeigt meist eine animierte Bewegung an, um Aktivität zu signalisieren.

Syntax

<progress [attribute]>...</progress> (Determinate)
<progress></progress> (Indeterminate)

Attribute bzw. Unterelemente

max

Definiert den Endpunkt der Aufgabe (Standardwert ist 1.0)

value

Gibt den aktuellen Fortschritt an (muss zwischen 0 und max liegen)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <progress> - ---

Der Code:

<!-- Fortschritt bei 70% -->
<label for="file">Dateiupload:</label>
<progress id="file" max="100" value="70"> 70% </progress>

<!-- Unbestimmter Ladevorgang -->
<progress></progress>

Ergebnis:

Ergebnis: <progress>-Demo 1
---

CSS-Tipps:

Die Farbe des Balkens und/oder des Hintergrunds zu ändern lässt sich nur über browserspezifische CSS-Pseudoelemente ändern, weil der Fortschrittsbalken ein natives UI-Element ist. Unterschiedliche Browser verwenden unterschiedliche Selektoren. Für Chrome, Safari und Edge:
progress {appearance: none; -webkit-appearance: none;}
progress::-webkit-progress-bar {background-color: #ddd;} (Hintergrund)
progress::-webkit-progress-value {background-color: green;} (Fortschritt)
Die native UI wird abgeschaltet und es ändert sich das Aussehen grundlegend. Die "indeterminate"-Variante (pendelnder Balken) hat keine Funktion mehr.

Ergebnis:

Ergebnis: <progress>-Demo 1

Anmerkungen

Ein häufiger Fehler ist die Verwechslung mit dem <meter>-Tag: <progress> wird bei dynamischen Abläufen verwendet (Dauer bis zum Ende der Aktion), <meter> für statische IST-Werte (wie z.B. Füllstand, Temperatur...).

Fallback-Text: Text zwischen dem öffnenden und schließenden Tag wird nur angezeigt, wenn der Browser das Element nicht unterstützt.