Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken

Pure CSS Animated Progress Bar

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.

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.

Punkt 2:

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

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.

Punkt 4:

Fertige Progress Bar (Grafik mit Erläuterungen)

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>

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.

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.

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

Super simple CSS bars – Diagramme mit CSS erstellen

Super simple CSS bars – einfache Diagramme mit CSS erstellen

Manchmal benötigt man verschiedenartige Diagramme für die Darstellung bestimmter Statistiken. Meistens macht man dazu mit irgendeinem Programm ein Bild, das man dann im Web veröffentlicht. Ändern sich diese Daten, muss man aber natürlich wieder zuerst das Bild neu abspeichern und neu veröffentlichen – ein Vorgang der oft sehr mühsam sein kann. Um auf das Bild verzichten zu können, gibt es diverse CSS Techniken mit denen man auch relativ einfach wunderbare Diagramme erstellen kann, die dann einfacher zu warten sind.

Ich möchte Ihnen hier an Hand eines Beispiele zeigen, wie Sie mit dem Einsatz von ein wenig CSS sehr rasch relativ einfache, aber durchaus schöne CSS-Diagramme erstellen kann.

Mein fertiges Beispiel sieht wie folgt aus:

Erklärung des Beispieles:

Html-Beispiel für ein Diagramm-Feld (200px 40% orange):

<fieldset>
  <legend>200px 40% orange</legend>
  <div class="progress-container" style="width: 200px">
    <div style="width: 40%; background: orange;"></div> = leere Box
  </div>
  <br/>
</fieldset>

Im Quellcode wird das HTML-Element fieldset, welches eigentlich in Formularen eingesetzt wird, zu Hilfe genommen. In diesem wird durch das HTML-Element legend die Diagramm-Überschrift festgelegt. Danach erfolgt die Festlegung von 2 div-Boxen.

Die div-Box div.progress-container wird mit Hilfe von CSS formatiert, bekommt jedoch auch einen Inline-Style, mit welchem die Gesamt-Breite/Länge des Diagrammes festgelegt werden soll.

In diese div-Box (div.progress-container) wird nun eine leere div-Box eingefügt. In dieser legen Sie mit einem Inline-Stylesheet den Prozentsatz des Diagrammes fest, welches Sie farbig darstellen möchten. Mit der Festlegung der Hintergrundfarbe können Sie hier die Farbe des Diagrammes (%-Anteil) festlegen.

Cascading Style Sheets:

div.progress-container {
  border: 1px solid #ccc;
  margin: 2px 5px 2px 0;
  padding: 1px;
  float: left;
  background: white;
}

div.progress-container > div {
  background-color: #ACE97C;
  height: 12px
}

Im CSS legen Sie mit der CSS-Klasse div.progress-container die äußere Form des Diagrammes fest.

Mit der CSS-Regel div.progress-container > div definieren Sie danach die leere div-Box. Mit der Festlegung der Hintergrundfarbe geben Sie dem Diagramm (%) erst das gewünschte Aussehen. Sie können die Hintergrundfarbe aber auch als Inline-Style bereits im HTML-Element definieren (siehe Erklärung zu HTML-Quellcode!)

Fertiges Beispiel hier ansehen:

Beispiel erstellt auf Basis eines Artikels von blog.leetsoft.com.