4 CSS-Fortschrittsbalken, die Sie auf Ihrer Website verwenden können

Karosserie {
Schriftart: 13px/20px "Lucida Grande", Tahoma, Verdana, serifenlos;
Farbe: #404040;
Hintergrund: #2a2a2a;
}

.Container {
Rand: 60px automatisch;
Breite: 400px;
Textausrichtung: Mitte;
}

.Container.Fortschritt {
Rand: 0 automatisch;
Breite: 400px;
}

.Fortschritt {
Polsterung: 4px;
Hintergrund: RGB(0, 0, 0, 0.25);
Randradius: 6px;
-webkit-box-shadow: Einsatz 0 1px 2pxRGB(0, 0, 0, 0.25), 0 1pxRGB(255, 255, 255, 0.08);
Box Schatten: Einsatz 0 1px 2pxRGB(0, 0, 0, 0.25), 0 1pxRGB(255, 255, 255, 0.08);
}

.Fortschrittsanzeige {
Höhe: 16px;
Randradius: 4px;
Hintergrundbild: -webkit-linearer-gradient(oben, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
Hintergrundbild: -moz-linearer-gradient(oben, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
Hintergrundbild: -o-linearer Gradient(oben, RGB(255, 255, 255, 0.3), RGB(255, 255, 255, 0.05));
Hintergrundbild: linearer Gradient(zuUnterseite, RGB(255, 255, 255, 0

.3), RGB(255, 255, 255, 0.05));
-webkit-Übergang: 00,4 Seklinear;
-moz-Übergang: 00,4 Seklinear;
-o-Übergang: 00,4 Seklinear;
Überleitung: 00,4 Seklinear;
-webkit-transition-property: Breite, Hintergrundfarbe;
-moz-Übergangseigenschaft: Breite, Hintergrundfarbe;
-o-Übergangseigenschaft: Breite, Hintergrundfarbe;
Übergangseigenschaft: Breite, Hintergrundfarbe;
-webkit-box-shadow: 0 0 1px 1pxRGB(0, 0, 0, 0.25), Einsatz 0 1pxRGB(255, 255, 255, 0.1);
Box Schatten: 0 0 1px 1pxRGB(0, 0, 0, 0.25), Einsatz 0 1pxRGB(255, 255, 255, 0.1);
}

#fünf:gecheckt ~ .Fortschritt > .Fortschrittsanzeige {
Breite: 5 %;
Hintergrundfarbe: #f63a0f;
}

#fünfundzwanzig:gecheckt ~ .Fortschritt > .Fortschrittsanzeige {
Breite: 25 %;
Hintergrundfarbe: #f27011;
}

#fünfzig:gecheckt ~ .Fortschritt > .Fortschrittsanzeige {
Breite: 50 %;
Hintergrundfarbe: #f2b01e;
}

#fünfundsiebzig:gecheckt ~ .Fortschritt > .Fortschrittsanzeige {
Breite: 75 %;
Hintergrundfarbe: #f2d31b;
}

#einhundert:gecheckt ~ .Fortschritt > .Fortschrittsanzeige {
Breite: 100 %;
Hintergrundfarbe: #86e01e;
}

.Radio {
Anzeige: keine;
}

.Etikette {
Anzeige: Inline-Block;
Rand: 0 5px 20px;
Polsterung: 3px 8px;
Farbe: #aa;
Textschatten: 0 1px schwarz;
Randradius: 3px;
Cursor: Zeiger;
}