HTML/CSC/PHP Prosty pasek stanu

[hghormone]

Witam.

Potrzbebuje zrobić mały pasek stanu magazynowego.
A dokladnie ma to wyglądać tak, że mam tabele i potrzebuje w jednej komorce zamiast tekstu umiescic taki maly pasek stanu, który bedzie mial 4 stany.

1 stan - pasek o szerokości 5px koloru czerwonego

2 stan - ten sam pasek ale zeby mial juz szerokosc 10px i mial kolor pomarańczowy

3 stan - teraz chciałbym aby ten pasek miał szerokość 15px i mial kolor zolty

4 stan - no ostani stan chcialbym, aby pasek mial 20px szerokosci i zeby caly byl koloru zielonego.

To coś w stylu pasku stanu magazynowego w sklepach internetowych tylko o wiele prostszy.
Nr stanu bede sobie odczytywał z bazy mysql.
Bardzo fajnie jakby ten pasek miał również obramowanie o szerokości 1px, no i oczywiscie zeby te obramowanie rozciagalo sie na szerokosc najwiekszego paska stanu czyli 20px, oczywiscie jesli wystapi stan nr 1 to oczywiście szerokosc obramoawnia zostaje taka sama czyli 20px.
Czyli ogolnie chodzi mi o taki prostokącik o róznej szerokości wypełnienia, w zależności od nru stanu.
Może któs pomóc mi to zrealizować?

[Kartofelek]

E tam panie po co js ;]

<div class="pasek">
<div class="p50"></div>
</div>

I tyle

.pasek {width:100px; height:20px; overflow:hidden;}
.pasek .p50 {width:50%; height:20px; background:red; overflow:hidden;}
.pasek .p20 {width:20%; height:20px; background:blue; overflow:hidden;}

ect. To tylko przykład

[hghormone]

Bardzo fajne i proste jest rozwiązanie Kartofelka .
Tylko dlaczego nie dziala mi opcja border, bo zeby ladniej to wygladalo chcialbym zeby na okolo byla cieniutka ramka.

[Kartofelek]

daj dla paska padding:1px; border według standardów wystaje poza obszar.

[hghormone]

dałem padding ale dalej ramki nie ma

[Kartofelek]

kombinuj. najwyzej daj background:url(......) repeat-x;