4 Bilah Kemajuan CSS yang Dapat Anda Gunakan di Situs Web Anda

tubuh {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
warna: #404040;
Latar Belakang: #2a2a2a;
}

.wadah {
margin: 60px otomatis;
lebar: 400px;
perataan teks: tengah;
}

.wadah.kemajuan {
margin: 0 otomatis;
lebar: 400px;
}

.kemajuan {
bantalan: 4px;
Latar Belakang: rgba(0, 0, 0, 0.25);
batas-radius: 6px;
-webkit-kotak-bayangan: sisipan 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
bayangan kotak: sisipan 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.progress-bar {
tinggi: 16 piksel;
batas-radius: 4px;
gambar latar belakang: -webkit-linier-gradien(atas, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
gambar latar belakang: -moz-linier-gradien(atas, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
gambar latar belakang: -o-linear-gradien(atas, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
gambar latar belakang: gradien linier(kedasar, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-webkit-transisi: 0.4slinier;
-moz-transisi: 0.4slinier;
-o-transisi: 0.4slinier;
transisi: 0.4slinier;
-webkit-transisi-properti: lebar, warna latar;
-moz-transisi-properti: lebar, warna latar;
-o-transisi-properti: lebar, warna latar;
properti transisi: lebar, warna latar;
-webkit-kotak-bayangan: 0 0 1px 1pxrgba(0, 0, 0, 0.25), sisipan 0 1pxrgba(255, 255, 255, 0.1);
bayangan kotak: 0 0 1px 1pxrgba(0, 0, 0, 0.25), sisipan 0 1pxrgba(255, 255, 255, 0.1);
}

#lima:diperiksa ~ .kemajuan > .progress-bar {
lebar: 5%;
warna latar belakang: #f63a0f;
}

#dua puluh lima:diperiksa ~ .kemajuan > .progress-bar {
lebar: 25%;
warna latar belakang: #f27011;
}

#lima puluh:diperiksa ~ .kemajuan > .progress-bar {
lebar: 50%;
warna latar belakang: #f2b01e;
}

#tujuh puluh lima:diperiksa ~ .kemajuan > .progress-bar {
lebar: 75%;
warna latar belakang: #f2d31b;
}

#seratus:diperiksa ~ .kemajuan > .progress-bar {
lebar: 100%;
warna latar belakang: #86e01e;
}

.radio {
tampilan: tidak ada;
}

.label {
tampilan: blok sebaris;
margin: 0 5px 20px;
bantalan: 3px 8px;
warna: #aaa;
text-shadow: 0 1px hitam;
batas-radius: 3px;
kursor: penunjuk;
}