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.

<blockquote> Block-Zitat

CSS - Display-Flex mit Tabellen

PHP - Datumsformat in ein deutsches Datum umwandeln

JavaScript - Confirm()

MySQL - Anzahl der Datensätze in einer Spalte

Standardschriftarten benutzen
Setze nach Möglichkeit nur Standardschriftarten ein (Arial,Times New Roman, Verdana, Fixedsys, Courier, ...), denn bei einem Besucher, der deine Schriftart nicht installiert hat, wird automatisch eine Standardschriftart gewählt und so ändert sich eventuell das komplette Layout deiner Homepage.