4 ukazovatele pokroku CSS, ktoré môžete použiť na svojom webe

telo {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
farba: #404040;
pozadie: #2a2a2a;
}

.kontajner {
okraj: 60px automaticky;
šírka: 400px;
text-align: center;
}

.kontajner.pokrok {
okraj: 0 auto;
šírka: 400px;
}

.pokrok {
výplň: 4px;
pozadie: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: vložka 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
box-shadow: vložka 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.ukazateľ postupu {
výška: 16px;
border-radius: 4px;
obrázok na pozadí: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázok na pozadí: -moz-lineárny-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázok na pozadí: -o-lineárny-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázok na pozadí: lineárny gradient(dodno, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit-prechod: 00,4 slineárne;
-moz-prechod: 00,4 slineárne;
-o-prechod: 00,4 slineárne;
prechod: 00,4 slineárne;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-prechod-vlastnosť: šírka, farba pozadia;
prechodová vlastnosť: šírka, farba pozadia;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), vložka 0 1pxrgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), vložka 0 1pxrgba(255, 255, 255, 0.1);
}

#päť:skontrolované ~ .pokrok > .ukazateľ postupu {
šírka: 5 %;
farba pozadia: #f63a0f;
}

#dvadsaťpäť:skontrolované ~ .pokrok > .ukazateľ postupu {
šírka: 25 %;
farba pozadia: #f27011;
}

#päťdesiat:skontrolované ~ .pokrok > .ukazateľ postupu {
šírka: 50 %;
farba pozadia: #f2b01e;
}

#sedemdesiatpäť:skontrolované ~ .pokrok > .ukazateľ postupu {
šírka: 75 %;
farba pozadia: #f2d31b;
}

#sto:skontrolované ~ .pokrok > .ukazateľ postupu {
šírka: 100 %;
farba pozadia: #86e01e;
}

.rádio {
displej: žiadny;
}

.štítok {
displej: inline-block;
okraj: 0 5px 20px;
výplň: 3px 8px;
farba: #aaa;
text-shadow: 0 1px čierna;
border-radius: 3px;
kurzor: ukazovateľ;
}