Progressbar-Test

XHTML-Header
closeDieser Beitrag wurde vor 8 Monaten 1 Tag veröffentlicht. Die Informationen in diesem Beitrag sind möglicherweise veraltet. Bitte benutze die Suche oder das Archiv, um nach neueren Informationen zu diesem Thema zu suchen.

Jeder hat schon mal diese Fortschrittsbalken auf Webseiten gesehen, wenn etwa Spenden gesammelt werden und über so einen Prograss Bar der Stand der Dinge angezeigt wird, und grafisch aufbereitet wird, wie viel noch zur Zielsumme noch fehlt.

Nun, in HTML 5 lässt sich ein solcher Fortschrittsbalken leicht realisieren. Hier gibt es nämlich ganz schlicht das Element <progress>. Diesem Element gibt mal als Parameter einen aktuellen Wert und einen maximalen Wert mit auf den Weg. Ich habe im Beispiel unten einfach mal die Kommentare dieses Blogs genommen und schaue mal, wie viele noch bis zum 5000. Kommentar fehlen. Als Max-Wert gebe ich also 5000 an, den aktuellen Wert muss ich aus der Datenbank auslesen und mache das über das hier immer noch aktive Semmelstatz. Als aktuellen Wert übergebe ich dem Progress-Element also eine PHP-Anweisung, die die aktuelle Anzahl der Kommentare hier im Blog ausliest. Das sind im Moment 3174.

Die Zeile

erzeugt ohne weiteres Styling folgenden Fortschrittsbalken:

Über eine Style-Anweisung kann ich den Balken auch über die gesamte, verfügbare Breite ausdehnen:

Mit CSS lässt sich noch einiges am Design drehen, ich verweise dazu einfach mal auf die englischsprachige Seite CSS-Tricks, die hier einiges darüber zu sagen hat.

Viel Spaß beim Ausprobieren, vielleicht findet ihr ja irgendeine Verwendung dafür oder sagt gar: Jau, genau sowas hab ich gesucht!

Keep it Country, Markus

1 Kommentar

  1. Timo

    Vielen dank für die Progess bar und die verlinkung zu der Englischen Seite dies hat mir sehr weiter geholfen !

    Mach weiter so mit deinen Blog :smoke:

    Edit by Admin: gewerblichen URL entfernt.

Kommentare sind geschlossen.

Wir verwenden Cookies, um unsere Webseite für Dich komfortabler zu machen. Mit der weiteren Nutzung unserer Seiten stimmst Du der Verwendung der Cookies zu.Akzeptieren