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

Ziyaretciler mesaj icerisindeki linkleri goremezler. Linkleri gorebilmek icin lutfen buraya tiklayarak kayit olunuz. başlığında bu yöntem anlatılmış. Oradan örnek alacak olursak yapmamız gerekenler şöyle.

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

Alıntı:HTML:
1.<div class="progress-container">
2.<div style="width: 95%Yasak Kelime</div>
3.</div>

Ve css kodları ise şöyle.

Alıntı:CSS:
1.div.progress-container {
2.border: 1px solid #ccc;
3.width: 100px;
4.margin: 2px 5px 2px 0;
5.padding: 1px;
6.float: left;
7.background: white;
8.}
9.
10.div.progress-container> div {
11.background-color: #ACE97C;
12.height: 12px
13.}

Sonuç olaraksa alttaki gibi grafikler elde ediyoruz