4 CSS-i edenemisriba, mida saate oma veebisaidil kasutada

keha {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
värv: #404040;
taust: #2a2a2a;
}

.konteiner {
veeris: 60px auto;
laius: 400 pikslit;
teksti joondamine: keskel;
}

.konteiner.edenemist {
marginaal: 0 auto;
laius: 400 pikslit;
}

.edenemist {
polster: 4px;
taustal: rgba(0, 0, 0, 0.25);
piiri raadius: 6 pikslit;
-webkit-box-shadow: sisend 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
kast-vari: sisend 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.edenemisriba {
kõrgus: 16 pikslit;
piiri raadius: 4 pikslit;
taustapilt: -veebikomplekt-lineaarne-gradient(üleval, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustapilt: -moz-lineaarne-gradient(üleval, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustapilt: -o-lineaarne gradient(üleval, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
taustapilt: lineaarne gradient(juurdepõhja, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-veebikomplekti üleminek: 0.4slineaarne;
-moz-üleminek: 0.4slineaarne;
-o-üleminek: 0.4slineaarne;
üleminek: 0.4slineaarne;
-webkit-transition-property: laius, taustavärv;
-moz-transition-property: laius, taustavärv;
-o-transition-property: laius, taustavärv;
üleminekuomadus: laius, taustavärv;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), sisend 0 1pxrgba(255, 255, 255, 0.1);
kast-vari: 0 0 1px 1pxrgba(0, 0, 0, 0.25), sisend 0 1pxrgba(255, 255, 255, 0.1);
}

#viis:kontrollitud ~ .edenemist > .edenemisriba {
laius: 5%;
taustavärv: #f63a0f;
}

#kakskümmend viis:kontrollitud ~ .edenemist > .edenemisriba {
laius: 25%;
taustavärv: #f27011;
}

#viiskümmend:kontrollitud ~ .edenemist > .edenemisriba {
laius: 50%;
taustavärv: #f2b01e;
}

#seitsekümmend viis:kontrollitud ~ .edenemist > .edenemisriba {
laius: 75%;
taustavärv: #f2d31b;
}

#sada:kontrollitud ~ .edenemist > .edenemisriba {
laius: 100%;
taustavärv: #86e01e;
}

.raadio {
kuva: puudub;
}

.silt {
ekraan: inline-block;
veeris: 0 5px 20px;
polster: 3px 8px;
värv: #aaa;
tekst-vari: 0 1px must;
piiri raadius: 3px;
kursor: kursor;
}