4 barres de progression CSS que vous pouvez utiliser sur votre site Web

corps {
police: 13px/20px "Lucida Grande", Tahoma, Verdana, sans empattement ;
Couleur: #404040;
Contexte: #2a2a2a ;
}

.récipient {
marge: 60px automatique ;
largeur: 400 pixels ;
aligner le texte: centrer ;
}

.récipient.le progrès {
marge: 0 automatique ;
largeur: 400 pixels ;
}

.le progrès {
rembourrage: 4px ;
Contexte: RVB(0, 0, 0, 0.25);
rayon de bordure: 6 px ;
-webkit-boîte-ombre: encart 0 1pixels 2pixelsRVB(0, 0, 0, 0.25), 0 1pixelsRVB(255, 255, 255, 0.08);
boîte ombre: encart 0 1pixels 2pixelsRVB(0, 0, 0, 0.25), 0 1pixelsRVB(255, 255, 255, 0.08);
}

.barre de progression {
hauteur: 16px ;
rayon de bordure: 4 px ;
image de fond: -webkit-linéaire-gradient(Haut, RVB(255, 255, 255, 0.3), RVB(255, 255, 255, 0.05));
image de fond: -moz-linéaire-gradient(Haut, RVB(255, 255, 255, 0.3), RVB(255, 255, 255, 0.05));
image de fond: -o-linéaire-gradient(Haut, RVB(255, 255, 255, 0.3), RVB(255, 255, 255, 0

.05));
image de fond: gradient linéaire(pourbas, RVB(255, 255, 255, 0.3), RVB(255, 255, 255, 0.05));
-webkit-transition: 0.4slinéaire;
-moz-transition: 0.4slinéaire;
-o-transition: 0.4slinéaire;
passage: 0.4slinéaire;
-webkit-transition-property: largeur, couleur d'arrière-plan ;
-moz-transition-property: largeur, couleur d'arrière-plan ;
-o-transition-property: largeur, couleur d'arrière-plan ;
propriété de transition: largeur, couleur d'arrière-plan ;
-webkit-boîte-ombre: 0 0 1pixels 1pixelsRVB(0, 0, 0, 0.25), encart 0 1pixelsRVB(255, 255, 255, 0.1);
boîte ombre: 0 0 1pixels 1pixelsRVB(0, 0, 0, 0.25), encart 0 1pixelsRVB(255, 255, 255, 0.1);
}

#cinq:vérifié ~ .le progrès > .barre de progression {
largeur: 5 % ;
Couleur de l'arrière plan: #f63a0f ;
}

#vingt cinq:vérifié ~ .le progrès > .barre de progression {
largeur: 25 % ;
Couleur de l'arrière plan: #f27011 ;
}

#cinquante:vérifié ~ .le progrès > .barre de progression {
largeur: 50 % ;
Couleur de l'arrière plan: #f2b01e ;
}

#soixante-quinze:vérifié ~ .le progrès > .barre de progression {
largeur: 75 % ;
Couleur de l'arrière plan: #f2d31b ;
}

#cent:vérifié ~ .le progrès > .barre de progression {
largeur: 100 % ;
Couleur de l'arrière plan: #86e01e ;
}

.radio {
affichage: aucun ;
}

.étiqueter {
affichage: bloc en ligne ;
marge: 0 5px 20px ;
rembourrage: 3px 8px ;
Couleur: #aaa ;
texte-ombre: 0 1px noir ;
rayon de bordure: 3 px ;
curseur: pointeur ;
}