<progress>
Das <progress>-Element zeigt den Fortschritt einer laufenden Aufgabe an. Typische Anwendungsfälle sind Dateiuploads, Downloads, Installationsvorgänge oder mehrstufige Formulare. Im Gegensatz zu <meter>, das einen statischen Messwert darstellt, ist <progress> explizit für Vorgänge gedacht, die irgendwann abgeschlossen sind.
- Kategorie
- Formulare
- Art
- Inline
- Attribute
- 2
- Beispiele
- 3
- Browser
- 5 von 5
- 0 von 5
- Stand
- 04.02.2026
Grundlagen
Vor <progress> mussten Entwickler Fortschrittsbalken komplett selbst bauen: Ein <div> als Container, ein inneres <div> als Balken, CSS für die Breite und JavaScript für die Animation. <progress> macht das in einer Zeile HTML. Der Browser kümmert sich um die Darstellung, und Screenreader verstehen automatisch, was gemeint ist.
<progress>zeigt den Fortschritt einer Aufgabe als horizontalen Balken an- Das
value-Attribut gibt den aktuellen Fortschritt an,maxden Zielwert (Standard: 1) - Ohne
value-Attribut zeigt der Browser einen unbestimmten Zustand an (pulsierende Animation) - Der unbestimmte Zustand signalisiert: “Etwas passiert, aber ich weiß nicht wie lange es noch dauert”
- Der Text zwischen den Tags dient als Fallback für ältere Browser
<progress>ist ein Inline-Element und kann direkt im Fließtext stehen- Der Wert wird typischerweise per JavaScript aktualisiert
Syntax
<label for="upload">Upload-Fortschritt:</label>
<progress id="upload" value="65" max="100">65%</progress>
<p>65 von 100 Dateien hochgeladen</p>Attribute
2 AttributeBeispiele
3 BeispieleEin einfacher Fortschrittsbalken mit festem Wert, zum Beispiel 70% eines Downloads:
<label>Download: 70%</label>
<progress value="70" max="100">70%</progress>
<label>Installation: 30%</label>
<progress value="30" max="100">30%</progress>
<label>Backup: abgeschlossen</label>
<progress value="100" max="100">100%</progress>Wenn du das value-Attribut weglässt, zeigt der Browser eine pulsierende Animation. Das ist perfekt für Situationen, in denen du weißt, dass etwas passiert, aber nicht wie weit der Vorgang ist (zum Beispiel beim Warten auf eine Server-Antwort).
<label>Verbindung wird hergestellt...</label>
<progress>Bitte warten...</progress>In der Praxis wird der Fortschritt fast immer per JavaScript aktualisiert. Hier ein Beispiel, das einen Dateiupload simuliert:
<label for="file-upload">Datei-Upload:</label>
<progress id="file-upload" value="0" max="100">0%</progress>
<p id="upload-text">0% hochgeladen</p>
<button id="start-upload">Upload starten</button>
<script>
document.getElementById("start-upload")
.addEventListener("click", function () {
const bar = document.getElementById("file-upload");
const text = document.getElementById("upload-text");
let progress = 0;
const interval = setInterval(() => {
progress += Math.floor(Math.random() * 8) + 2;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
}
bar.value = progress;
text.textContent = progress + "% hochgeladen";
}, 200);
});
</script>Barrierefreiheit
Das <progress>-Element hat die implizite ARIA-Rolle progressbar. Screenreader erkennen es automatisch als Fortschrittsanzeige und lesen den aktuellen Wert vor. Du brauchst keine zusätzlichen ARIA-Attribute, solange du ein <label> oder aria-label für die Beschreibung verwendest.
Für den unbestimmten Zustand (ohne value) kündigen Screenreader an, dass ein Vorgang läuft, ohne einen konkreten Prozentwert zu nennen. Das entspricht genau der Intention: “Etwas passiert, aber der Fortschritt ist unbekannt.”
Verwende <progress> statt einer eigenen CSS-Lösung. Selbstgebaute Fortschrittsbalken erfordern manuelle ARIA-Attribute (role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax), die leicht vergessen oder falsch implementiert werden. <progress> liefert all das automatisch.
Häufige Fehler
3 Fehler01 Progress statt Meter verwenden
<progress> ist für laufende Aufgaben mit einem Endpunkt. Für statische Messwerte wie Speicherplatz, Lautstärke oder Bewertungen ist <meter> das richtige Element. Eine Festplatte, die zu 80% voll ist, ist kein Fortschritt. Sie “arbeitet” nicht auf 100% hin. 02 Fallback-Text vergessen
<progress> und </progress> wird nur angezeigt, wenn der Browser das Element nicht unterstützt. Trotzdem ist es gute Praxis, einen sinnvollen Fallback wie “65%” anzugeben (für ältere Browser und als zusätzliche Sicherheit). 03 Unbestimmten Zustand nicht nutzen
value="0", wenn der Fortschritt unbekannt ist. Das zeigt einen leeren Balken, was wie “noch nicht angefangen” aussieht. Wenn du nicht weißt, wie weit ein Vorgang ist, lass das value-Attribut komplett weg. Der Browser zeigt dann die passende Animation. Browser-Kompatibilität
5 von 5Das progress-Element wird von allen modernen Browsern vollständig unterstützt. Das Styling über CSS ist möglich, aber die Pseudo-Elemente unterscheiden sich je nach Browser.
-
Chrome
Komplett
Styling via ::-webkit-progress-bar und ::-webkit-progress-value
-
Firefox
Komplett
Styling via ::-moz-progress-bar
-
Safari
Komplett
Styling via ::-webkit-progress-bar und ::-webkit-progress-value
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
0 von 5Das progress-Element wird von keinem relevanten E-Mail-Client unterstützt. Für Fortschrittsanzeigen in E-Mails musst du auf eine CSS-basierte Lösung mit div-Elementen und festen Breiten ausweichen.
-
Apple Mail
Keine
Zeigt den Fallback-Text statt des Balkens an.
-
Gmail
Keine
Entfernt das progress-Element komplett.
-
Outlook
Keine
Keine Unterstützung für progress. Verwende Tabellen-Layouts als Alternative.
-
Thunderbird
Keine
Zeigt den Fallback-Text an.
-
Yahoo Mail
Keine
Entfernt das progress-Element.
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da