W3docs
de
Anmelden

HTML <progress>-Tag

Das <progress>-Tag zeigt den Fortschrittsanzeiger einer Aufgabe (Fortschrittsbalken). Beispiele zur Verwendung.

Das <progress>-Tag ist eines der HTML5-Elemente. Es stellt den Abschlussfortschritt einer Aufgabe dar — wie viel einer Operation (Datei-Upload, Download, Formularschritt, Installation) bisher erledigt wurde. Der Browser zeichnet einen Fortschrittsbalken, dessen Füllung value relativ zu max widerspiegelt.

Da <progress> nur beschreibt, wie weit etwas vorangeschritten ist, ändern sich die tatsächlichen Werte gewöhnlich zur Laufzeit. Sie aktualisieren diese mit JavaScript (siehe das dynamische Beispiel unten). Das genaue Erscheinungsbild des Elements unterscheidet sich je nach Browser und Betriebssystem.

<progress> vs <meter>

Diese beiden Elemente sehen ähnlich aus, bedeuten aber unterschiedliche Dinge — wählen Sie nach Absicht, nicht nach Aussehen:

Verwenden Sie <progress>, wenn…Verwenden Sie <meter>, wenn…
Sie zeigen, wie weit eine Aufgabe abgeschlossen ist (sie schreitet bis zur Fertigstellung voran).Sie eine statische Messung innerhalb eines bekannten Bereichs zeigen, wie Festplattenauslastung, eine Punktzahl oder die Relevanz eines Suchergebnisses.
Der Wert von 0 bis max über die Zeit natürlich wächst.Der Wert irgendwo auf einer festen Skala liegt und nicht „in Bearbeitung" ist.

Als Faustregel gilt: Wenn Sie es abschließen könnten, verwenden Sie <progress>. Wenn Sie nur ein Niveau messen, verwenden Sie <meter>.

Syntax

Das <progress>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<progress>) und schließenden (</progress>) Tag geschrieben.

Beispiel des HTML-<progress>-Tags:

HTML <progress>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="35" max="100">35%</progress>
  </body>
</html>
Probier es selbst »

Ergebnis

progress tag example

Der Text zwischen den Tags (35% oben) ist Fallback-Inhalt: Browser, die <progress> unterstützen, ignorieren ihn und zeichnen den Balken, während sehr alte Browser, die das Element nicht kennen, stattdessen den Text anzeigen. Es ist gute Praxis, ihn mit dem aktuellen Wert synchron zu halten.

Barrierefreiheit: Beschriften Sie Ihren Fortschrittsbalken immer

Ein bloßer <progress>-Balken wird von Screenreadern als Prozentsatz ohne Kontext ausgegeben — „35 Prozent" sagt dem Benutzer nichts darüber, was geladen wird. Geben Sie ihm auf eine dieser Arten einen zugänglichen Namen:

  • Ein <label>, dessen for mit der id des Balkens übereinstimmt (wie oben). Das Klicken auf das Label ist ebenfalls eine nützliche Affordanz.
  • aria-labelledby, das auf die id eines sichtbaren Texts zeigt.
  • aria-label="…", wenn kein sichtbarer Text als Referenz vorhanden ist.
<!-- Visible label referenced by the bar -->
<span id="upload-status">Uploading photos</span>
<progress aria-labelledby="upload-status" value="60" max="100">60%</progress>

<!-- No visible text? Use aria-label -->
<progress aria-label="Uploading photos" value="60" max="100">60%</progress>

Bestimmt vs. unbestimmt

Ein Fortschrittsbalken kann bestimmt oder unbestimmt sein.

  • Bestimmt — Sie wissen, wie weit die Aufgabe vorangeschritten ist, also geben Sie einen value an. Der Balken füllt sich proportional (value ÷ max).
  • Unbestimmt — Sie wissen, dass die Aufgabe läuft, aber nicht, wie viel noch übrig ist, also lassen Sie das value-Attribut weg. Der Browser zeigt stattdessen einen animierten „Aktivitäts"-Balken (ein sich bewegender Streifen oder Puls) anstelle einer festen Füllung.

Unbestimmtes Beispiel

Lassen Sie value weg, um den unbestimmten Zustand zu erhalten, und setzen Sie ihn, sobald Sie die tatsächliche Zahl kennen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="task">Working:</label>
    <!-- No value attribute → indeterminate (animated) -->
    <progress id="task" max="100">Working…</progress>
  </body>
</html>

Dies ist ideal, während Sie auf eine Serverantwort warten und noch keinen Prozentsatz berechnen können. Sobald Sie es können, wechseln Sie dasselbe Element zum bestimmten Zustand, indem Sie value über JavaScript setzen (progress.value = 40).

Styling von bestimmt vs. unbestimmt

Es ist einfacher, den unbestimmten Balken zu stylen, da er kein value-Attribut hat — Sie können ihn mit dem CSS-Negations-Selektor progress:not([value]) ansprechen.

Der bestimmte Balken wird mit dem Selektor progress[value] angesprochen. Fügen Sie Abmessungen mit den CSS-Eigenschaften width und height hinzu und setzen Sie appearance auf none:

Styling von Fortschrittsbalken

Der einfache moderne Weg: accent-color

In den meisten Fällen benötigen Sie keine Vendor-Prefixe oder Pseudo-Elemente mehr. Setzen Sie die CSS-Eigenschaft accent-color und jeder moderne Browser färbt den Balken mit einer einzigen Zeile einheitlich ein:

progress {
  accent-color: #2563eb; /* color of the filled portion */
  width: 200px;
}

Greifen Sie auf die präfixierten Pseudo-Elemente unten zurück, nur wenn Sie vollständige Kontrolle über die Spur, benutzerdefinierte Farbverläufe benötigen oder ältere Engines unterstützen müssen.

WebKit/Blink (Chrome/Safari/Opera) — erweitertes Legacy-Styling

Chrome, Safari und die neueste Version von Opera (16+) gehören zu dieser Kategorie. Das Aussehen des <progress>-Elements kann mit -webkit-appearance: progress-bar gestaltet werden.

Setzen Sie -webkit-appearance: none;, um die Standardstile zurückzusetzen.

Beispiel eines Fortschrittsbalkens

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 15px;
}

Beispiel des bestimmten Zustands des Fortschrittsbalkens:

Beispiel eines bestimmten Fortschrittsbalkens:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="30" max="100">30%</progress>
  </body>
</html>
Probier es selbst »

Danach können Probleme auftreten, da verschiedene Browser separate Pseudo-Elemente zum Styling des Fortschrittsbalkens bereitstellen. Um dieses Problem zu lösen, können Sie Fallbacks verwenden.

WebKit/Blink stellt zwei Pseudo-Elemente bereit:

  • ::-webkit-progress-bar, das den Container des Progress-Elements stylt.
  • ::-webkit-progress-value, das den Wert innerhalb des Fortschrittsbalkens stylt.

Stylen Sie ::-webkit-progress-bar mit verschiedenen CSS-Eigenschaften:

Beispiel eines Fortschrittsbalkens

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}

Stylen Sie ::-webkit-progress-value, das dem Balken entspricht, mit mehreren Verlaufshintergründen für verschiedene Zwecke. Verwenden Sie das -webkit--Präfix für die Verläufe:

webkit-progress-value

progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
  border-radius: 4px;
  background-size: 20px 15px, 100% 100%, 100% 100%;
}

Beispiel des HTML-<progress>-Tags mit CSS-Eigenschaften:

Beispiel des HTML-<progress>-Tags mit CSS-Eigenschaften:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #cccccc;
        border-radius: 4px;
      }
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
        border-radius: 4px;
        background-size: 20px 15px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Probier es selbst »

Firefox

Durch die Verwendung von appearance: none können wir die standardmäßige Abfasung und Prägung entfernen. Dies hinterlässt jedoch in Firefox einen leichten Rahmen, der durch border: none entfernt werden kann. Dies löst auch das Rahmenproblem mit Opera 12.

Beispiel des <progress>-Balkens in Firefox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Probier es selbst »

Firefox stellt ein einzelnes Pseudo-Element (::-moz-progress-bar) bereit, das zum Ansprechen des Fortschrittsbalken-Werts verwendet werden kann. Mit anderen Worten: Wir können den Hintergrund des Containers in Firefox nicht stylen.

HTML <progress>-Tag - Firefox

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

Firefox unterstützt die Pseudo-Elemente ::before oder ::after beim Fortschrittsbalken nicht und erlaubt keine CSS3-keyframe-Animationen auf dem Fortschrittsbalken, was zu einem eingeschränkten Erlebnis führt.

Beispiel des HTML-<progress>-Tags für Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value]::-moz-progress-bar {
        background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, 
                          rgba(0, 0, 0, 0.1) 66%, transparent 66%), 
                          -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), 
                          rgba(0, 0, 0, 0.25)),
                          -moz-linear-gradient( left, #ff00f7, #4e922a);
        background-size: 35px 20px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Probier es selbst »

Fortschrittsbalken mit JavaScript aktualisieren

Da ein echtes <progress>-Element eine value-Eigenschaft besitzt, aktualisieren Sie den Balken einfach, indem Sie ihr eine Zahl zuweisen — der Browser zeichnet die Füllung für Sie neu. Hier simuliert ein Timer einen Download, der von 0 auf 100 fortschreitet und dann anhält:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="download">Downloading:</label>
    <progress id="download" value="0" max="100">0%</progress>
    <span id="status">0%</span>

    <script>
      var bar = document.getElementById("download");
      var status = document.getElementById("status");
      var loaded = 0;

      var timer = setInterval(function () {
        loaded += 5;
        bar.value = loaded;          // moves the bar
        status.textContent = loaded + "%";
        if (loaded >= bar.max) {
          clearInterval(timer);
        }
      }, 300);
    </script>
  </body>
</html>

Um einen Balken zur Laufzeit von unbestimmt auf bestimmt umzuschalten, setzen Sie seinen value, sobald Sie die tatsächliche Zahl kennen (bar.value = 40). Um zu unbestimmt zurückzukehren, entfernen Sie das Attribut mit bar.removeAttribute("value").

Scroll-Fortschrittsbalken (reine CSS-Alternative)

Das folgende Element besteht aus gestylten <div>s, nicht aus einem echten <progress>-Element. Es ist ein verbreitetes Muster für einen Seiten-Scroll-Indikator, bei dem Sie die volle Kontrolle über das Aussehen wünschen. Wenn Sie ein semantisches Element bevorzugen, könnten Sie das <div> durch ein <progress> ersetzen und seinen value im Scroll-Handler aktualisieren.

So erstellen Sie einen Balken, der anzeigt, wie weit Sie auf der Seite nach unten gescrollt haben:

Beispiel, wie ein Fortschrittsbalken erstellt wird, der anzeigt, wie weit Sie auf der Seite nach unten gescrollt haben

<!DOCTYPE html>
<html>
  <head>
    <style>
      #progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #ddd;
      }

      #progress-bar-fill {
        height: 100%;
        background-color: blue;
        width: 0%;
      }
    </style>
  </head>
  <body>
    <div id="progress-bar">
      <div id="progress-bar-fill"></div>
    </div>

    <h1>Scrollable Content</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>

    <script>
      window.addEventListener("scroll", function () {
        var progressBarFill = document.getElementById("progress-bar-fill");
        var scrollPosition = window.scrollY;
        var totalHeight = document.body.scrollHeight - window.innerHeight;
        var percentage = (scrollPosition / totalHeight) * 100;
        progressBarFill.style.width = percentage + "%";
      });
    </script>
  </body>
</html>
Probier es selbst »

In diesem Beispiel haben wir ein fest positioniertes div mit der id progress-bar, das als Container dient. Darin dient ein weiteres div mit der id progress-bar-fill als bewegliche Füllung. (Da dies ein dekorativer Scroll-Indikator und keine Aufgabe ist, ist ein einfaches <div> hier akzeptabel; ein echtes <progress> würde ebenfalls funktionieren, wenn Sie seinen value im selben Handler setzen.)

Wir haben CSS verwendet, um die anfängliche Breite und Höhe des Fortschrittsbalkens sowie die Hintergrundfarben für den Fortschrittsbalken und seine Füllung festzulegen.

Wir haben auch einen JavaScript-Ereignis-Listener eingebunden, der auf das scroll-Ereignis des window-Objekts lauscht. Wenn der Benutzer die Seite scrollt, berechnen wir die Scroll-Position und die Gesamthöhe der Seite und berechnen dann den Prozentsatz der gescrollten Seite. Wir aktualisieren die width-Eigenschaft des progress-bar-fill-Elements, um diesen Prozentsatz widerzuspiegeln und damit den Fortschrittsbalken zu aktualisieren.

Sie können diesen Code in eine neue HTML-Datei kopieren und sie in Ihrem Webbrowser öffnen, um zu sehen, wie er aussieht. Während Sie auf der Seite nach unten scrollen, aktualisiert sich der Fortschrittsbalken, um anzuzeigen, wie weit Sie gescrollt haben. Sie können die Höhe und Farbe des Fortschrittsbalkens nach Ihren Bedürfnissen anpassen.

Attribute

AttributWertBeschreibung
maxnumberDefiniert den Maximalwert des aktuellen Prozesses. Der Wert kann eine positive Zahl größer als 0 sein.
valuenumberDefiniert die Größe der abgeschlossenen Aufgabe. Der Wert kann eine Zahl von 0 bis zur im max-Attribut angegebenen Zahl sein, oder eine Zahl im Bereich von 0 bis 1, wenn das max-Attribut nicht angegeben ist.

Das <progress>-Tag unterstützt auch die globalen Attribute und die Ereignisattribute.

Übung

Übung
Was stellt das HTML-progress-Tag dar?
Was stellt das HTML-progress-Tag dar?
Was this page helpful?