Komfortabler Blindtext-Generator mit CSS-Formatierungen

Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken

Ich möchte Ihnen heute in diesem Beispiel mit einer einfachen Demonstration zeigen, wie Sie einen animierten Fortschrittsbalken (animated progress bar) mit HTML und ein wenig CSS herstellen können.

Der Trick ist sehr einfach. Sie benötigen dazu einleitend 3 HTML-Elemente (1 Container und 2 ineinander verschachtelte Elemente).

Beispiel ansehen / Download Beispieldateien (17,5 KB Zip-File)

Das Konzept

Punkt 1:

Zuerst legen wir eine Hintergrund-Grafik (bg_bar.gif) in den Container (Definitionsliste dd bzw. Blockelement p) 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.

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.

Dadurch und durch den CSS-Befehl repeat-x entsteht erst 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. Fortschrittsbalken – Progress Bar in einer Definitionsliste (dd):

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* 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:

1
2
3

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 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

Warum funktioniert dies nun also? Natürlich nur, weil hier 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 völlig egal, welchen Prozentsatz Sie auch einstellen, die Grafik bleibt genau bei Ihrer eingestellten 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, 35% wäre 70px, 90% sind demnach 180px und so weiter.

Beispiel ansehen / Download Beispieldateien (17,5 KB Zip-File)

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:

CSS/HTML-Tricks: Float mit mehreren div-Boxen
CSS/HTML-Tricks: Unterschied zwischen relativer und absoluter Positionierung
CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen
CSS-Tricks: Wie Sie doppelte Rahmen für Bilder/Grafiken erstellen können
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS-Tricks: Listen mit Sonderzeichen

Tags: Alen Grakalic, animated progress bar, Animation, animierter Fortschrittsbalken, CSS Globe, Fortschrittsbalken, Pixelpusher, Progress Bar, Pure CSS Animated Progress Bar, www.cssglobe.com, www.pixelpusher.bi