Prozentbalken in css

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.