4 paski postępu CSS, których możesz użyć na swojej stronie internetowej

ciało {
czcionka: 13px/20px "Lucida Grande", Tahoma, Verdana, bezszeryfowy;
kolor: #404040;
tło: #2a2a2a;
}

.pojemnik {
margines: 60px auto;
szerokość: 400px;
wyrównanie tekstu: środek;
}

.pojemnik.postęp {
margines: 0 auto;
szerokość: 400px;
}

.postęp {
wypełnienie: 4px;
tło: RGB(0, 0, 0, 0.25);
promień obramowania: 6px;
-webkit-box-cień: wstawka 0 1px 2pxRGB(0, 0, 0, 0.25), 0 1pxRGB(255, 255, 255, 0.08);
cień pudełka: wstawka 0 1px 2pxRGB(0, 0, 0, 0.25), 0 1pxRGB(255, 255, 255, 0.08);
}

.pasek postępu {
wysokość: 16px;
promień obramowania: 4px;
zdjęcie w tle: -webkit-linear-gradient(szczyt, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
zdjęcie w tle: -moz-liniowy-gradient(szczyt, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
zdjęcie w tle: -o-liniowy-gradient(szczyt, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
zdjęcie w tle: gradient liniowy(dona dole, RGB(255, 255, 255, 0

.3), RGB(255, 255, 255, 0.05));
-przejście-webkit: 00,4sliniowy;
-moz-przejście: 00,4sliniowy;
-o-przejście: 00,4sliniowy;
przemiana: 00,4sliniowy;
-webkit-transition-property: szerokość, kolor tła;
-moz-transition-property: szerokość, kolor tła;
-o-transition-property: szerokość, kolor tła;
właściwość przejścia: szerokość, kolor tła;
-webkit-box-cień: 0 0 1px 1pxRGB(0, 0, 0, 0.25), wstawka 0 1pxRGB(255, 255, 255, 0.1);
cień pudełka: 0 0 1px 1pxRGB(0, 0, 0, 0.25), wstawka 0 1pxRGB(255, 255, 255, 0.1);
}

#pięć:sprawdzony ~ .postęp &g; .pasek postępu {
szerokość: 5%;
kolor tła: #f63a0f;
}

#dwadzieścia pięć:sprawdzony ~ .postęp &g; .pasek postępu {
szerokość: 25%;
kolor tła: #f27011;
}

#pięćdziesiąt:sprawdzony ~ .postęp &g; .pasek postępu {
szerokość: 50%;
kolor tła: #f2b01e;
}

#siedemdziesiąt pięć:sprawdzony ~ .postęp &g; .pasek postępu {
szerokość: 75%;
kolor tła: #f2d31b;
}

#stota:sprawdzony ~ .postęp &g; .pasek postępu {
szerokość: 100%;
kolor tła: #86e01e;
}

.radio {
Nie wyświetla się;
}

.etykieta {
wyświetlacz: inline-block;
margines: 0 5px 20px;
wypełnienie: 3px 8px;
kolor: #aaa;
cień tekstu: 0 1px czarny;
promień obramowania: 3px;
kursor: wskaźnik;
}