Web Sitenizde Kullanabileceğiniz 4 CSS İlerleme Çubuğu

gövde {
yazı tipi: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
renk: #404040;
arka fon: #2a2a2a;
}

.konteyner {
kenar boşluğu: 60 piksel otomatik;
genişlik: 400 piksel;
metin hizalama: merkez;
}

.konteyner.ilerlemek {
kenar boşluğu: 0 otomatik;
genişlik: 400 piksel;
}

.ilerlemek {
dolgu: 4 piksel;
arka fon: rgba(0, 0, 0, 0.25);
sınır yarıçapı: 6 piksel;
-webkit-kutusu-gölge: iç metin 0 1piksel 2pikselrgba(0, 0, 0, 0.25), 0 1pikselrgba(255, 255, 255, 0.08);
kutu-gölge: iç metin 0 1piksel 2pikselrgba(0, 0, 0, 0.25), 0 1pikselrgba(255, 255, 255, 0.08);
}

.ilerleme çubuğu {
yükseklik: 16 piksel;
sınır yarıçapı: 4 piksel;
arka plan görüntüsü: -webkit-doğrusal-gradyan(üst, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
arka plan görüntüsü: -moz-doğrusal-gradyan(üst, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
arka plan görüntüsü: -o-doğrusal-gradyan(üst, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
arka plan görüntüsü: lineer gradyan(ilealt kısım, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-geçiş: 0.4sdoğrusal;
-moz-geçiş: 0.4sdoğrusal;
-o-geçiş: 0.4sdoğrusal;
geçiş: 0.4sdoğrusal;
-webkit-geçiş-özelliği: genişlik, arka plan rengi;
-moz-geçiş-özelliği: genişlik, arka plan rengi;
-o-geçiş-özelliği: genişlik, arka plan rengi;
geçiş özelliği: genişlik, arka plan rengi;
-webkit-kutusu-gölge: 0 0 1piksel 1pikselrgba(0, 0, 0, 0.25), iç metin 0 1pikselrgba(255, 255, 255, 0.1);
kutu-gölge: 0 0 1piksel 1pikselrgba(0, 0, 0, 0.25), iç metin 0 1pikselrgba(255, 255, 255, 0.1);
}

#beş:kontrol ~ .ilerlemek > .ilerleme çubuğu {
genişlik: %5;
arka plan rengi: #f63a0f;
}

#yirmi beş:kontrol ~ .ilerlemek > .ilerleme çubuğu {
genişlik: %25;
arka plan rengi: #f27011;
}

#elli:kontrol ~ .ilerlemek > .ilerleme çubuğu {
genişlik: %50;
arka plan rengi: #f2b01e;
}

#yetmiş beş:kontrol ~ .ilerlemek > .ilerleme çubuğu {
genişlik: %75;
arka plan rengi: #f2d31b;
}

#yüz:kontrol ~ .ilerlemek > .ilerleme çubuğu {
genişlik: %100;
arka plan rengi: #86e01e;
}

.radyo {
görüntü yok;
}

.etiket {
ekran: satır içi blok;
kenar boşluğu: 0 5px 20px;
dolgu: 3px 8px;
renk: #aaa;
metin gölgesi: 0 1px siyah;
sınır yarıçapı: 3 piksel;
imleç: işaretçi;
}