4 vrstice napredka CSS, ki jih lahko uporabite na svojem spletnem mestu

telo {
pisava: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
barva: #404040;
ozadje: #2a2a2a;
}

.posoda {
rob: 60px samodejno;
širina: 400px;
poravnava besedila: središče;
}

.posoda.napredek {
marža: 0 samodejno;
širina: 400px;
}

.napredek {
padding: 4px;
ozadje: rgba(0, 0, 0, 0.25);
radij obrobe: 6px;
-webkit-box-shadow: vložek 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
škatla-senca: vložek 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.vrstica napredka {
višina: 16px;
radij obrobe: 4px;
slika ozadja: -webkit-linear-gradient(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
slika ozadja: -moz-linearni-gradient(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
slika ozadja: -o-linearni-gradient(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
slika ozadja: linearni gradient(dodno, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit-prehod: 0.4slinearna;
-moz-prehod: 0.4slinearna;
-o-prehod: 0.4slinearna;
prehod: 0.4slinearna;
-webkit-transition-property: širina, barva ozadja;
-moz-transition-property: širina, barva ozadja;
-o-prehod-lastnost: širina, barva ozadja;
prehodna lastnost: širina, barva ozadja;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), vložek 0 1pxrgba(255, 255, 255, 0.1);
škatla-senca: 0 0 1px 1pxrgba(0, 0, 0, 0.25), vložek 0 1pxrgba(255, 255, 255, 0.1);
}

#pet:preverjeno ~ .napredek > .vrstica napredka {
širina: 5 %;
Barva ozadja: #f63a0f;
}

#petindvajset:preverjeno ~ .napredek > .vrstica napredka {
širina: 25 %;
Barva ozadja: #f27011;
}

#petdeset:preverjeno ~ .napredek > .vrstica napredka {
širina: 50 %;
Barva ozadja: #f2b01e;
}

#petinsedemdeset:preverjeno ~ .napredek > .vrstica napredka {
širina: 75 %;
Barva ozadja: #f2d31b;
}

#sto:preverjeno ~ .napredek > .vrstica napredka {
širina: 100 %;
Barva ozadja: #86e01e;
}

.radio {
zaslon: brez;
}

.oznaka {
zaslon: inline-block;
rob: 0 5px 20px;
padding: 3px 8px;
barva: #aaa;
senca besedila: 0 1px črna;
radij obrobe: 3px;
kazalec: kazalec;
}