4 CSS trake napretka koje možete koristiti na svojoj web stranici

tijelo {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
boja: #404040;
pozadina: #2a2a2a;
}

.kontejner {
margina: 60px auto;
širina: 400px;
poravnavanje teksta: središte;
}

.kontejner.napredak {
margina: 0 auto;
širina: 400px;
}

.napredak {
padding: 4px;
pozadini: rgba(0, 0, 0, 0.25);
radijus granice: 6px;
-webkit-box-shadow: umetnuti 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
kutija-sjena: umetnuti 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.traka za napredak {
visina: 16px;
radijus granice: 4px;
pozadinska slika: -webkit-linearni-gradijent(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
pozadinska slika: -moz-linearni-gradijent(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
pozadinska slika: -o-linearni-gradijent(vrh, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
pozadinska slika: linearno-gradijent(dodno, rgba(255, 255, 255, 0

.3), rgba(255, 255, 255, 0.05));
-webkit-prijelaz: 0.4slinearni;
-moz-prijelaz: 0.4slinearni;
-o-prijelaz: 0.4slinearni;
tranzicija: 0.4slinearni;
-webkit-transition-property: širina, boja pozadine;
-moz-prijelaz-svojstvo: širina, boja pozadine;
-o-prijelaz-svojstvo: širina, boja pozadine;
svojstvo prijelaza: širina, boja pozadine;
-webkit-box-shadow: 0 0 1px 1pxrgba(0, 0, 0, 0.25), umetnuti 0 1pxrgba(255, 255, 255, 0.1);
kutija-sjena: 0 0 1px 1pxrgba(0, 0, 0, 0.25), umetnuti 0 1pxrgba(255, 255, 255, 0.1);
}

#pet:provjereno ~ .napredak > .traka za napredak {
širina: 5%;
boja pozadine: #f63a0f;
}

#dvadeset pet:provjereno ~ .napredak > .traka za napredak {
širina: 25%;
boja pozadine: #f27011;
}

#pedeset:provjereno ~ .napredak > .traka za napredak {
širina: 50%;
boja pozadine: #f2b01e;
}

#sedamdeset pet:provjereno ~ .napredak > .traka za napredak {
širina: 75%;
boja pozadine: #f2d31b;
}

#jedna stotina:provjereno ~ .napredak > .traka za napredak {
širina: 100%;
boja pozadine: #86e01e;
}

.radio {
prikaz: nema;
}

.označiti {
zaslon: inline-block;
margina: 0 5px 20px;
padding: 3px 8px;
boja: #aaa;
text-shadow: 0 1px crna;
radijus granice: 3px;
kursor: pokazivač;
}