<progress>

Zuletzt aktualisiert am 4. Februar 2026

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.

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, max den 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

Beispiele

Bestimmter Fortschritt

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

Unbestimmter Zustand

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>

JavaScript-gesteuerter Upload

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

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.

Fallback-Text vergessen: Der Text zwischen <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.

Unbestimmten Zustand nicht nutzen: Viele Entwickler setzen 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

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

Email-Kompatibilität

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

Verwandte Elemente