Wie Sie einen animierten Fortschrittsbalken mit CSS erstellen

Animierter Fortschrittsbalken – Pure CSS Animated Progress Bar

In meinem heutigen Artikel möchte ich Ihnen mit einer einfachen Demonstration zeigen, wie ein animierter Fortschrittsbalken (Animated Progress Bar) nur mit HTML und einigen wenigen CSS-Anweisungen erstellt werden kann.

Erläuterung des Konzeptes:

Im Grunde genommen ist der “Trick” zur Erstellung des animierten Fortschrittsbalken (Pure CSS Animated Progress Bar) sehr einfach. Sie benötigen dazu einleitend nur 3 einfache HTML-Elemente (1 Container und 2 ineinander verschachtelte Elemente).

Demo ansehen | Download Beispieldateien (20 KB Zip-File)

Punkt 1:

Legen Sie zuerst eine Hintergrund-Grafik (bg_bar.gif) in den Container (Definitionsliste dd bzw. Blockelement p) und definieren Sie dabei unbedingt eine fixe Höhe und eine fixe Breite.

Punkt 2:

Dabei fungiert das HTML-Element span (First Child) 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 dem Fortschrittsbalken platziert.

Ganz wichtig: Im HTML-Element em wird die Breite des Fortschrittbalkens mit einem Inline-Style festgelegt. Inline-Styles bieten Ihnen die Möglichkeit, die CSS-Formatierungen ohne die herkömmlichen Selektoren direkt am HTML-Element selbst anzubringen. Sie sind am besten geeignet zur individuellen Formatierung einzelner Elemente.

Der Effekt des Fortschrittsbalken entsteht erst dadurch und durch den CSS-Befehl repeat-x, damit dieser 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. Fortschrittsbalken – Progress Bar in einer Definitionsliste (dd):

HTML:

<dl>
    <dt>Marktanteil 90%</dt>
          <dd>
             <span><em style="left:180px">90%</em></span>
          </dd>
     <dt>Toleranzgrenze 10%</dt>
          <dd>
             <span><em style="left:20px">10%</em></span>
          </dd>
     <dt>Bekanntheitsgrad 50%</dt>
          <dd>
             <span><em style="left:100px">50%</em></span>
          </dd>
 </dl>

CSS:

/* DEFINITION LIST PROGRESS BAR */

dt, dd {
   margin:0;
   padding:0;
}

dl { padding: 5px 0 10px 10px;
     margin:0;
     border: 1px solid #000;
     width: 230px;
}

dd {
   width:216px;
   height:41px;
   background:url(bg_bar.gif) no-repeat 0 0;
   position:relative;
}

dd span {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bar.gif) no-repeat 0 0;
   top:8px;
   left:8px;
   overflow:hidden;
   text-indent:-8000px;
}

dd em {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bg_cover.gif) repeat-x;
   top:0;
}

2. Fortschrittsbalken innerhalb des Block-Elementes p:

HTML:

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

CSS:

/* SINGLE PROGRESS BAR */

.progressBar {
   width:216px;
   height:41px;
   background:url(bg_bar.gif) no-repeat 0 0;
   position:relative;
}

.progressBar span {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bar.gif) no-repeat 0 0;
   top:8px;
   left:8px;
   overflow:hidden;
   text-indent:-8000px;
}

.progressBar em {
   position:absolute;
   display:block;
   width:200px;
   height:25px;
   background:url(bg_cover.gif) repeat-x;
   top:0;
}

Punkt 6:

Animation des Fortschrittsbalkens

Der “animierte Fortschrittsbalken” funktioniert natürlich nur, weil im Beispiel eine animierte Grafik (bar.gif) zur Anwendung kommt. Das HTML-Element span besitzt eine 200px breite Hintergrund-Grafik, welche sozusagen von “Null” bis 200px verläuft (animiert). Im HTML-Element em wird danach die Breite der Animation durch einen Inline-Style (left …. px) eingestellt.

Ergebnis: Es ist somit völlig egal, welchen Prozentsatz Sie auch einstellen, die Grafik bleibt genau bei der von Ihnen festgelegten Zahl stehen.

Punkt 7:

HTML-Element em: Einstellung der Breite

In meinem Beispiel verwende ich eine 200px breite Progress Bar. Das HTML-Element em hat also auch eine Breite von 200px. Jedes Prozent ist hier dementsprechend 2px breit. 50% bedeutet also 100px, 30% wäre 60px, 80% sind demnach 160px und so weiter.

Demo ansehen | Download Beispieldateien (20 KB Zip-File)

Zum Original-Artikel:

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.

Ähnliche Artikel:

1. CSS für Anfänger – Wie Sie ganz einfach Drop Caps erstellen
2. CSS für Anfänger: Textmarker für Fliesstext
3. Wie Sie in eine vertikale CSS-Navigation eine Infobox (Tooltip) einbauen
4. CSS für Anfänger: Der normale Fluss von div-Boxen
5. 12 Free CSS Menüs von Codrops