Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex auf Twitter verwenden

HTML5 Element ''progress''
<progress>

Logo des Browsers Chrome von GoogleLogo des Browsers Firefox von MozillaLogo des Browsers Internet Explorer von MicrosoftLogo des Browsers OperaLogo des Browsers Safari von Apple
Stand:

Mit diesem Element wird eine Fortschrittsanzeige / ein Fortschrittsbalken dargestellt, wie sie z.B. bei vielen Umfragen findet, wo der Nutzer in etwa abschätzen kann, wie lange es noch bis zum Ende dauert.

Beispiel einer "Ladeanzeige":


Quelltext-Auszug:

<progress></progress>

Beispiel einer Fortschrittsanzeige:

(Tooltip: 45% verarbeitet)

Quelltext-Auszug:

<progress value="45" max="100" title="45% verarbeitet"></progress>
In den obigen Beispielen wird beides Mal eine Fortschrittsanzeige mit progress erstellt.

Ohne Angaben eines value-Attributs springt die Anzeige von einem Ende zum Anderen. So wird signalisiert, dass die Dauer eines Prozesses / Fortschritts unbekannt ist.

Sobald das value-Attribut im progress-Befehl vorkommt, wird automatisch eine fixe Anzeige dargestellt. Mit dem max-Attribut wird die Begrenzung angegeben, wobei es sich hierbei nicht unbedingt um Prozentangaben handeln muss (siehe Beispiel).
Die Angabe des Wertes erfolgt in ganzen Zahlen oder Dezimalzahlen in englischer Schreibweise (1.23).

Das title-Attribut ist nicht zwingend, kann aber zur Erklärung dienen. Der Inhalt wird als Tooltip angezeigt.

Eine ähnliche Variante ist das Element meter, welches der grafischen Darstellung von Messwerten dient.


zum Seitenanfang



© 2002 - 2022 · www.onlex.de - HomepageTools | Impressum | Sitemap