4 CSS Progress Bars, které můžete použít na svém webu

tělo {
font: 13px/20px "Lucida Grandeová", Tahoma, Verdana, sans-serif;
barva: #404040;
Pozadí: #2a2a2a;
}

.kontejner {
okraj: 60px auto;
šířka: 400px;
text-align: center;
}

.kontejner.pokrok {
okraj: 0 auto;
šířka: 400px;
}

.pokrok {
výplň: 4px;
Pozadí: 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);
}

.ukazatel průběhu {
výška: 16px;
border-radius: 4px;
obrázek na pozadí: -webkit-linear-gradient(horní, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázek na pozadí: -moz-lineární-gradient(horní, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázek na pozadí: -o-lineární-gradient(horní, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
obrázek na pozadí: lineární gradient(nadno, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit-transition: 00,4 slineární;
-moz-přechod: 00,4 slineární;
-o-přechod: 00,4 slineární;
přechod: 00,4 slineární;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-přechod-vlastnost: šířka, barva-pozadí;
přechodová vlastnost: šířka, barva pozadí;
-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ět:kontrolovány ~ .pokrok > .ukazatel průběhu {
šířka: 5 %;
barva pozadí: #f63a0f;
}

#dvacet pět:kontrolovány ~ .pokrok > .ukazatel průběhu {
šířka: 25 %;
barva pozadí: #f27011;
}

#padesátka:kontrolovány ~ .pokrok > .ukazatel průběhu {
šířka: 50 %;
barva pozadí: #f2b01e;
}

#sedmdesát pět:kontrolovány ~ .pokrok > .ukazatel průběhu {
šířka: 75 %;
barva pozadí: #f2d31b;
}

#sto:kontrolovány ~ .pokrok > .ukazatel průběhu {
šířka: 100 %;
barva pozadí: #86e01e;
}

.rádio {
displej: žádný;
}

.označení {
displej: inline-block;
okraj: 0 5px 20px;
odsazení: 3px 8px;
barva: #aaa;
text-shadow: 0 1px černá;
border-radius: 3px;
kurzor: ukazatel;
}