CSS ile basit bir ilerleme durum çubuğu yapımı

Kimi zaman istatistik grafiklerinden kimi zamanda yüklenme grafiklerinde, ilerleme durum çubukları oluşturabiliyoruz. Bunlar için genelde resim dosyaları kullanmaktayız ya da tablolar. Fakat resim dosyadan olmadan bu işi css ile basit bir şekilde halledebilirsiniz

Super simple CSS bars başlığında bu yöntem anlatılmış. Oradan örnek alacak olursakyapmamız gerekenler şöyle.

Öncelikle kullanacağımız html kodumuz şunlar.

<div class="progress-container">
<div style="width: 95%"></div>
</div>

Ve css kodları ise şöyle.

div.progress-container {
border: 1px solid #ccc;
width: 100px;
margin: 2px 5px 2px 0;
padding: 1px;
float: left;
background: white;
}

div.progress-container > div {
background-color: #ACE97C;
height: 12px
}

Sonuç olaraksa alttaki gibi grafikler elde ediyoruz

%95

%100

%60

%40, artalan turuncu