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 Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<legend> Gruppenüberschrift

CSS - Nur gefüllte Tabellenzellen hervorheben

PHP - Verzeichnisgröße auslesen

JavaScript - Zufallsfarbe ausgeben

MySQL - Zeichenkette ersetzen mit REPLACE

Einfaches Design
Die Besucher suchen in erster Linie nach Informationen auf der Webseite und schauen nicht nach dem Design. Erstellen Sie deshalb ein einfaches Design auf Ihrer Homepage das Pflegeleicht ist. Es erspart Ihnen Arbeit, Traffickosten und dem Besucher Ladezeit.