Balken mit Füllung

[Hakan]

Hallo Leute,

ich hab da ein Problem, wo ich hoffe, es mit CSS lösen zu können.

Ich will mit CSS einen Balken zeichnen. An sich kein Problem. Gibt ja verschiedene Lösungen.
Das besondere ist aber, der Balken muss befüllt werden und das nicht komplett.

Je nachdem, was für eine Zahl der User eingibt (0-50) soll der Balken Prozentual befüllt werden. 0 = 0% und 50 = 100% Befüllung.

Hat einer eine Idee?

Gruß, Hakan

[suit]

Je nachdem, was für eine Zahl der User eingibt (0-50) soll der Balken Prozentual befüllt werden. 0 = 0% und 50 = 100% Befüllung.

Hat einer eine Idee?

ein zweites element innen rein

<div class="balken">
 <span style="width: 50%;">Wertung: 50%</span>
<div>

#balken {
  width: 100px;
  height: 10px;
}

#balken span {
  display: block;
  overflow: hidden;
  text-indent: -99999px;
}

auf alistapart gibts da irgendwo einen artikel wie man statistiken und diagramme mit html/css ordentlich darstellt - ich finde den grade aber nicht - aber so ähnlich wurde das da gemacht

gff kannst du natürlich den text im span auch nicht ins nirvana schiessen sondern anzeigen