Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken

Posted by sura1 - 19. Dezember 2008

dez19
Bookmark and Share

Pure CSS Animated Progress Bar

purecssprogressbar1

Ich möchte Ihnen in diesem Beispiel mit einer einfachen Demonstration zeigen, wie Sie einen animierten Fortschrittsbalken (animated progress bar) mit CSS herstellen können.
Der Trick ist sehr einfach. Sie benötigen dazu 3 Elemente (1 Container und 2 ineinander verschachtelte Elemente). Meine Beispieldatei (Zipfile) hat eine Größe von 40 KB.

demo download

trennlinie_mit_schatten

Das Konzept

Punkt 1:

Zuerst legen wir eine Hintergrund-Grafik (bg_bar.gif) in den Container und definieren eine fixe Höhe und eine fixe Breite.
bg_bar

trennlinie_mit_schatten

Punkt 2:

Das HTML-Element <span> (First Child) fungiert als animierter Fortschrittsbalken (bar.gif).
bar

trennlinie_mit_schatten

Punkt 3:

Das HTML-Element <em> (Second Child) mit der Grafik bg_cover.gif wird danach mit der CSS-Eigenschaft position: absolute genau über der Progress Bar platziert.

Erst durch den CSS-Befehl repeat-x entsteht der Effekt des Fortschrittsbalken, welcher bei einem bestimmten Prozentsatz stehen bleibt.
bg_cover

trennlinie_mit_schatten

Punkt 4:

Fertige Progress Bar (Grafik mit Erläuterungen)

grafik_zusammenstellung

trennlinie_mit_schatten

Punkt 5:

In meinem Beispiel sehen Sie den Effekt des Fortschrittsbalkens in 2 verschiedenen Variationen:

1. Progress Bar in einer Definitionsliste (dd):

   <dd>
      <span><em style="left:180px">90%</em></span>
   </dd>

2. Single Progress Bar innerhalb des Block-Elementes p (paragraph):

   <p class="progressBar">
      <span><em style="left:50px">25%</em></span>
   </p>

trennlinie_mit_schatten

Punkt 6:

Warum funktioniert dies nun also? Natürlich nur, weil hier eine animierte Grafik (bar.gif) zur Anwendung kommt. SPAN besitzt eine 200px breite Hintergrund-Grafik, welche sozusagen von „Null“ bis 200px verläuft (animiert).
Es ist völlig egal, welchen Prozentsatz Sie auch einstellen, die Grafik bleibt genau bei Ihrer eingestellten Zahl stehen.

pure-css-progress-bar2

trennlinie_mit_schatten

Punkt 7:

EM-Element: Einstellung der Breite

In meinem Beispiel verwende ich eine 200px breite Progress Bar. Das EM-Element hat also auch eine Breite von 200px. Jedes Prozent ist hier dementsprechend 2px breit. 50% bedeutet also 100px, 35% wäre 70px, 90% sind demnach 180px und so weiter.

trennlinie_mit_schatten

Zum Original-Artikel:

http://cssglobe.com/post/1468/pure-css-animated-progress-bar

Mein Artikel ist eine autorisierte Bearbeitung bzw. Übersetzung des Artikels von Alen Grakalic von CSS Globe | Web Standard Magazine. Das Original hat den Titel Pure CSS Animated Progress Bar und wurde vom Webdesigner am 27. März 2008 veröffentlicht.

Nähere Informationen zum Autor:

About CSS Globe
Pixelpusher

Alen Grakalic lives in Rijeka, Croatia. He is a freelance web designer and web developer. He is 33 years old and married (wife Natasa and 3 years old son Erik).

Ähnliche Artikel:

Super simple css bars – einfache Diagramme mit CSS erstellen
CSS-Tricks: Walking Links – Spazierende Links
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: