HTML-Tag <progress>
Das Tag <progress> ist eines der HTML5-Elemente. Es wird verwendet, um den Fortschritt einer Aufgabe anzuzeigen (Fortschrittsbalken). Dynamisch veränderte Werte des Fortschrittsbalkens müssen mit Skripten (JavaScript) definiert werden.
Das Erscheinungsbild des Elements kann je nach Browser und Betriebssystem unterschiedlich sein.
Wir empfehlen, das Tag <meter> zu verwenden, um eine Anzeige darzustellen (z. B. die Relevanz eines Suchergebnisses).
Syntax
Das Tag <progress> wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<progress>) und dem schließenden (</progress>) Tag geschrieben.
Beispiel für das HTML-<progress>-Tag:
HTML <progress> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100" aria-label="Loading progress"></progress>
</body>
</html>Ergebnis
Fortschrittsbalken
Ein Fortschrittsbalken kann unbestimmt oder bestimmt sein.
Es ist einfacher, den unbestimmten Fortschrittsbalken zu gestalten, da er kein value-Attribut hat. Wir können ihn mit der CSS-Negationsklasse :not() gestalten.
Der bestimmte Fortschrittsbalken wird mit dem Selektor progress[value] angesprochen. Fügen Sie Ihrem Fortschrittsbalken mit den CSS-width- und height-Eigenschaften Abmessungen hinzu und setzen Sie die appearance auf none:
Fortschrittsbalken gestalten
WebKit/Blink (Chrome/Safari/Opera)
Chrome, Safari und die neueste Version von Opera (16+) gehören zu dieser Kategorie. Das Erscheinungsbild des <progress>-Elements kann mit -webkit-appearance: progress-bar gestaltet werden.
Setzen Sie -webkit-appearance: none;, um die Standardstile zurückzusetzen.
Beispiel für einen Fortschrittsbalken
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}Beispiel für den bestimmten Zustand des Fortschrittsbalkens:
Beispiel für einen bestimmten Fortschrittsbalken:
<!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>
<span>Loading:</span>
<progress value="30" max="100" aria-label="Loading progress"></progress>
</body>
</html>Danach können Probleme auftreten, weil verschiedene Browser separate Pseudo-Elemente zum Gestalten 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 Fortschrittselements gestaltet.::-webkit-progress-value, das den Wert innerhalb des Fortschrittsbalkens gestaltet.
Gestalten Sie ::-webkit-progress-bar mit verschiedenen CSS-Eigenschaften:
Beispiel für einen Fortschrittsbalken
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}Gestalten Sie ::-webkit-progress-value, das dem Balken entspricht, mit mehreren Farbverläufen für unterschiedliche Zwecke. Verwenden Sie für die Farbverläufe das Präfix -webkit-:
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 für das HTML-<progress>-Tag mit CSS-Eigenschaften:
Beispiel für das HTML-<progress>-Tag 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>Firefox
Durch die Verwendung von appearance: none können wir die standardmäßige Abschrägung und Prägung entfernen. Allerdings bleibt in Firefox ein leichter Rand zurück, der mit border: none entfernt werden kann. Dadurch wird auch das Randproblem in Opera 12 gelöst.
Beispiel für den <progress>-Balken 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>Firefox stellt ein einzelnes Pseudo-Element (::-moz-progress-bar) bereit, mit dem der Wert des Fortschrittsbalkens angesprochen werden kann. Anders gesagt: Wir können den Hintergrund des Containers in Firefox nicht gestalten.
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 auf dem Fortschrittsbalken nicht und erlaubt keine CSS3-keyframe-Animation auf dem Fortschrittsbalken, was zu einer eingeschränkten Darstellung führt.
Beispiel für das HTML-<progress>-Tag für Firefox:
Beispiel für das HTML-<progress>-Tag 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>Beispiel für einen coolen Anwendungsfall eines Fortschrittsbalkens beim Scrollen der Seite!
Hier ist ein Beispiel dafür, wie man einen Fortschrittsbalken erstellt, der anzeigt, wie weit Sie auf der Seite nach unten gescrollt haben:
Beispiel dafür, wie man einen Fortschrittsbalken erstellt, 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>In diesem Beispiel haben wir ein div-Element mit fester Position und der id progress-bar, das als Container für den Fortschrittsbalken dient. Innerhalb dieses Containers haben wir ein weiteres div-Element mit der id progress-bar-fill, das als eigentlicher Fortschrittsbalken dient.
Wir haben CSS verwendet, um die anfängliche Breite und Höhe des Fortschrittsbalkens sowie die Hintergrundfarben für den Fortschrittsbalken und die Füllung des Fortschrittsbalkens festzulegen.
Wir haben außerdem einen JavaScript-Ereignis-Listener eingebunden, der auf das scroll-Ereignis des Window-Objekts hört. Wenn der Benutzer die Seite scrollt, berechnen wir die Scrollposition und die Gesamthöhe der Seite und anschließend den Prozentsatz der gescrollten Seite. Wir aktualisieren die Eigenschaft width des Elements progress-bar-fill, um diesen Prozentsatz widerzuspiegeln und dadurch den Fortschrittsbalken zu aktualisieren.
Sie können diesen Code in eine neue HTML-Datei kopieren und in Ihrem Webbrowser öffnen, um zu sehen, wie er aussieht. Wenn Sie auf der Seite nach unten scrollen, wird der Fortschrittsbalken aktualisiert, um anzuzeigen, wie weit Sie gescrollt haben. Sie können die Höhe und Farbe des Fortschrittsbalkens an Ihre Bedürfnisse anpassen.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| max | number | Definiert den Maximalwert des aktuellen Vorgangs. Der Wert kann eine positive Zahl größer als 0 sein. |
| value | number | Definiert die Größe der abgeschlossenen Aufgabe. Der Wert kann eine Zahl von 0 bis zur im Attribut max angegebenen Zahl sein oder, wenn das Attribut max nicht angegeben ist, eine Zahl im Bereich von 0 bis 1. |
Das Tag <progress> unterstützt außerdem die Global Attributes und die Event Attributes.
Practice
Was stellt das HTML-progress-Tag dar?