4 CSS-voortgangsbalken die u op uw website kunt gebruiken

lichaam {
lettertype: 13px/20px "Lucida Grande", Tahoma, Verdana, schreefloos;
kleur: #404040;
achtergrond: #2a2a2a;
}

.container {
marge: 60px automatisch;
breedte: 400px;
tekst uitlijnen: midden;
}

.container.voortgang {
marge: 0 automatisch;
breedte: 400px;
}

.voortgang {
opvulling: 4px;
achtergrond: rgba(0, 0, 0, 0.25);
grensradius: 6px;
-webkit-box-schaduw: inzet 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
doos-schaduw: inzet 0 1px 2pxrgba(0, 0, 0, 0.25), 0 1pxrgba(255, 255, 255, 0.08);
}

.voortgangsbalk {
hoogte: 16px;
grensradius: 4px;
achtergrond afbeelding: -webkit-lineaire-gradiënt(bovenkant, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
achtergrond afbeelding: -moz-lineaire-gradiënt(bovenkant, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
achtergrond afbeelding: -o-lineaire-gradiënt(bovenkant, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
achtergrond afbeelding

: lineair-gradiënt(totonderkant, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-overgang: 0.4slineair;
-moz-overgang: 0.4slineair;
-o-overgang: 0.4slineair;
overgang: 0.4slineair;
-webkit-transition-property: breedte, achtergrondkleur;
-moz-transition-property: breedte, achtergrondkleur;
-o-overgang-eigenschap: breedte, achtergrondkleur;
overgangseigenschap: breedte, achtergrondkleur;
-webkit-box-schaduw: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inzet 0 1pxrgba(255, 255, 255, 0.1);
doos-schaduw: 0 0 1px 1pxrgba(0, 0, 0, 0.25), inzet 0 1pxrgba(255, 255, 255, 0.1);
}

#vijf:gecontroleerd ~ .voortgang > .voortgangsbalk {
breedte: 5%;
Achtergrond kleur: #f63a0f;
}

#vijfentwintig:gecontroleerd ~ .voortgang > .voortgangsbalk {
breedte: 25%;
Achtergrond kleur: #f27011;
}

#vijftig:gecontroleerd ~ .voortgang > .voortgangsbalk {
breedte: 50%;
Achtergrond kleur: #f2b01e;
}

#vijfenzeventig:gecontroleerd ~ .voortgang > .voortgangsbalk {
breedte: 75%;
Achtergrond kleur: #f2d31b;
}

#honderd:gecontroleerd ~ .voortgang > .voortgangsbalk {
breedte: 100%;
Achtergrond kleur: #86e01e;
}

.radio {
Geen weergeven;
}

.label {
weergave: inline-blok;
marge: 0 5px 20px;
opvulling: 3px 8px;
kleur: #aaa;
tekstschaduw: 0 1px zwart;
grens-radius: 3px;
cursor: aanwijzer;
}