4 CSS-fremskridtsbjælker, du kan bruge på dit websted

krop {
skrifttype: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
farve: #404040;
baggrund: #2a2a2a;
}

.beholder {
margin: 60px auto;
bredde: 400px;
tekst-align: center;
}

.beholder.fremskridt {
margin: 0 auto;
bredde: 400px;
}

.fremskridt {
polstring: 4px;
baggrund: rgba(0, 0, 0, 0.25);
kant-radius: 6px;
-webkit-boks-skygge: indsat 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
kasse-skygge: indsat 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.fremskridtslinje {
højde: 16px;
kant-radius: 4px;
baggrundsbillede: -webkit-lineær-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
baggrundsbillede: -moz-lineær-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
baggrundsbillede: -o-lineær-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
baggrundsbillede: lineær gradient(tilbund, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit-overgang: 0.4slineær;
-moz-overgang: 0.4slineær;
-o-overgang: 0.4slineær;
overgang: 0.4slineær;
-webkit-transition-property: bredde, baggrundsfarve;
-moz-transition-property: bredde, baggrundsfarve;
-o-transition-property: bredde, baggrundsfarve;
overgangsegenskab: bredde, baggrundsfarve;
-webkit-boks-skygge: 0 0 1px 1pxrgba(0, 0, 0, 0.25), indsat 0 1pxrgba(255, 255, 255, 0.1);
kasse-skygge: 0 0 1px 1pxrgba(0, 0, 0, 0.25), indsat 0 1pxrgba(255, 255, 255, 0.1);
}

#fem: kontrolleret ~ .fremskridt > .fremskridtslinje {
bredde: 5%;
baggrundsfarve: #f63a0f;
}

#femogtyve: kontrolleret ~ .fremskridt > .fremskridtslinje {
bredde: 25%;
baggrundsfarve: #f27011;
}

#halvtreds: kontrolleret ~ .fremskridt > .fremskridtslinje {
bredde: 50%;
baggrundsfarve: #f2b01e;
}

#femoghalvfjerds: kontrolleret ~ .fremskridt > .fremskridtslinje {
bredde: 75%;
baggrundsfarve: #f2d31b;
}

#et hundrede: kontrolleret ~ .fremskridt > .fremskridtslinje {
bredde: 100%;
baggrundsfarve: #86e01e;
}

.radio {
display: ingen;
}

.etiket {
display: inline-blok;
margin: 0 5px 20px;
polstring: 3px 8px;
farve: #aaa;
tekst-skygge: 0 1px sort;
kant-radius: 3px;
markør: pointer;
}