Prozentbalken in css

Möchte man seine Leser beispielweise darüber informieren, wie weit man mit einem Projekt ist, so bietet es sich an eine kleine Übersicht zu erstellen in Form von einem Statusbalken mit Prozentangaben. Ich habe hier einmal ein kleines Tutorial geschrieben, wie man es machen könnte.

Sicherlich gibt es noch viele weitere Möglichkeiten aber für eine kleine Übersicht dürfte diese Maßnahme völlig ausreichen.

Der css code
In Zeile 2 wird die Gesamtlänge definiert (siehe schwarze Umrandung unten im Ergebnis)
In Zeile 6-8 werden Typografie festgelegt.

1
2
3
4
5
6
7
8
9

.graph {
width: 400px;
}
 
.graph .bar {
text-align: center;
line-height: 2em;
height: 2em;
}

Der html code
In Zeile 2 und 3 müssen jeweils die Prozentangaben definiert werden. Hier sind es jetzt 70%.
Die Farbe kann in Zeile 2 auch noch angepasst werden unter background: #7bd930.

1
2
3
4
5

<div class="graph" style="padding: 2px;border:1px solid #000000">
   <div class="bar" style="background: #7bd930 none repeat scroll 0% 0%; width: 70%; color: black;">
      <strong>70%</strong>
   </div>
</div>

Es empfiehlt sich einen roten Balken zu nehmen, wenn der Projektbalken erst 20% erreicht hat und einen grünen wenn er sich zur Fertigstellung nähert. Ich hoffe das dieses kleine Beispiel Verwendung findet, denn man kann es wie ich finde ziemlich mühelos aktualisieren.