Fortschrittsbalken mit CSS zeichnen[IE|M|O|S|G]

von: Werner Zenk

84.05%

<div style="position:relative; width:100px; background-color: #C0C0C0;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">84.05%</span> 
 <div style="position: relative; width: 84.05%; background-color: #00FF00; color: #00FF00;
 z-index:2;">.</div>
</div>

50.22%

<div style="position:relative; width:100px; background-color: #C0C0C0;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">50.22%</span> 
 <div style="position: relative; width: 50.22%; background-color: #FF8000; color: #FF8000;
 z-index:2;">.</div>
</div>

19.34%

<div style="position:relative; width:100px; background-color: #A4A4A4;
 border: solid 1px #000000;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">19.34%</span> 
 <div style="position: relative; width: 19.34%; background-color: #46A3FF; color: #46A3FF;
 border-right: solid 1px #FFFFFF; z-index:2;">.</div>
</div>

90.10%

<div style="position:relative; width:100px; background-color: #FFFF00;
 border: solid 1px #000000;">
 <span style="position: absolute; width: 100%; z-index: 3; text-align: center;">90.10%</span> 
 <div style="position: relative; width: 90.10%; background-color: #FF6262; color: #FF6262;
 border-right: solid 1px #000000; z-index:2;">.</div>
</div>

Siehe auch:

Level-Anzeige mit PHP und CSS

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

SFuss@gmx.net: Cool. Und mit JavaScript kann man das ganze nun auch noch "animieren"! Werner: Siehe: Ladebalken Sebastian: Stimmt, aber ich finde das Design hier besser. Außerdem ist die Breite fest und der Prozentwert IM Balken. Das könnte man zwar bei den anderen auch noch machen, aber so ist einfacherDanke
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!