HTML Progress Bar Generator
Native Fortschrittsanzeige – z.B. Upload, Download, Aufgaben.
Anwendung & Beispiele
Ohne value wird ein animierter „indeterminate"-Balken angezeigt – ideal, wenn der Fortschritt noch unklar ist.
FAQ
Was ist der Unterschied zu <meter>?
<progress> für den Fortschritt einer Aufgabe (0% → 100%, Richtung wichtig). <meter> für absolute Messwerte mit definierten Bereichen (z.B. Festplattenplatz, Batteriestand).
Wie aktualisiere ich den Fortschritt?
Per JavaScript: progressEl.value = newValue. Bei Datei-Upload via XHR2 oder Fetch: xhr.upload.onprogress = e => progressEl.value = e.loaded / e.total * 100.
Wie style ich den Balken?
Größe per progress { width: 100%; height: 8px; }. Detailstyling browserspezifisch: ::-webkit-progress-bar, ::-webkit-progress-value, ::-moz-progress-bar.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.