HTML - Element: <progress>

Der <progress>-Tag (HTML 5) zeigt eine Fortschrittsanzeige oder einen Bearbeitungsschritt an. Mit dem Attribut max="" wird die maximale Schrittweite angegeben und mit value="" der aktuelle Bearbeitungsschritt (<meter>). Je nach Browser und Betriebssystem sieht die Anzeige anders aus.

Mozilla Firefox / Windows 10 Microsoft Edge / Windows 10 Google Chrome / Opera / Windows 10
<!DOCTYPE html>
<html>
<head>
 <title>Fortschrittsanzeige</title>
</head>
<body>

<h1>Fortschrittsanzeige</h1>

<p>
<progress></progress> <br>
<progress max="4" value="1">Schritt 1 / 4</progress> <br>
<progress max="4" value="2">Schritt 2 / 4</progress> <br>
<progress max="4" value="3">Schritt 3 / 4</progress> <br>
<progress max="4" value="4">Schritt 4 / 4</progress>
</p>

</body>
</html>

Beispiel anzeigen

Der <progress>-Tag kann nicht mit CSS formatiert werden!

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<blockquote> Block-Zitat

CSS - Verwendung von Datenattributen (data-*)

PHP - Konvertieren von Zeichen mit Akzenten

JavaScript - JavaScript-Version des Browsers anzeigen

MySQL - Mit mehreren Begriffen gleichzeitig suchen