4 barre di avanzamento CSS che puoi utilizzare sul tuo sito web

corpo {
carattere: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
colore: #404040;
sfondo: #2a2a2a;
}

.contenitore {
margine: 60px automatico;
larghezza: 400px;
allineamento testo: centro;
}

.contenitore.progresso {
margine: 0 automatico;
larghezza: 400px;
}

.progresso {
imbottitura: 4px;
sfondo: rgba(0, 0, 0, 0.25);
raggio di confine: 6px;
-webkit-box-ombra: inserto 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
scatola-ombra: inserto 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.barra di avanzamento {
altezza: 16px;
raggio di confine: 4px;
immagine di sfondo: -webkit-lineare-gradiente(superiore, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
immagine di sfondo: -moz-lineare-gradiente(superiore, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
immagine di sfondo: -o-gradiente-lineare(superiore, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
immagine di sfondo: gradiente lineare(ametter il fondo a, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-transizione webkit: 0.4slineare;
-moz-transizione: 0.4slineare;
-o-transizione: 0.4slineare;
transizione: 0.4slineare;
-proprietà-transizione-webkit: larghezza, colore di sfondo;
-proprietà-transizione-moz: larghezza, colore di sfondo;
-o-proprietà-transizione: larghezza, colore di sfondo;
proprietà di transizione: larghezza, colore di sfondo;
-webkit-box-ombra: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inserto 0 1pxrgba(255, 255, 255, 0.1);
scatola-ombra: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inserto 0 1pxrgba(255, 255, 255, 0.1);
}

#cinque:controllato ~ .progresso > .barra di avanzamento {
larghezza: 5%;
colore di sfondo: #f63a0f;
}

#venticinque:controllato ~ .progresso > .barra di avanzamento {
larghezza: 25%;
colore di sfondo: #f27011;
}

#cinquanta:controllato ~ .progresso > .barra di avanzamento {
larghezza: 50%;
colore di sfondo: #f2b01e;
}

#Settanta cinque:controllato ~ .progresso > .barra di avanzamento {
larghezza: 75%;
colore di sfondo: #f2d31b;
}

#cento:controllato ~ .progresso > .barra di avanzamento {
larghezza: 100%;
colore di sfondo: #86e01e;
}

.Radio {
display: nessuno;
}

.etichetta {
display: blocco in linea;
margine: 0 5px 20px;
imbottitura: 3px 8px;
colore: #aaa;
testo-ombra: 0 1px nero;
raggio di confine: 3px;
cursore: puntatore;
}