4 barras de progreso CSS que puedes usar en tu sitio web

cuerpo {
fuente: 13px/20px "Lúcida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
antecedentes: #2a2a2a;
}

.envase {
margen: 60px automático;
ancho: 400px;
alineación de texto: centro;
}

.envase.Progreso {
margen: 0 automático;
ancho: 400px;
}

.Progreso {
relleno: 4px;
antecedentes: rgb(0, 0, 0, 0.25);
borde-radio: 6px;
-webkit-caja-sombra: recuadro 0 1píxeles 2píxelesrgb(0, 0, 0, 0.25), 0 1píxelesrgb(255, 255, 255, 0.08);
sombra de la caja: recuadro 0 1píxeles 2píxelesrgb(0, 0, 0, 0.25), 0 1píxelesrgb(255, 255, 255, 0.08);
}

.barra de progreso {
altura: 16px;
borde-radio: 4px;
imagen de fondo: -webkit-linear-gradiente(cima, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.05));
imagen de fondo: -moz-lineal-gradiente(cima, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.05));
imagen de fondo: -o-lineal-degradado(cima, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.05));
imagen de fondo: gradiente lineal

(paraabajo, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.05));
-webkit-transición: 0.4slineal;
-moz-transición: 0.4slineal;
-o-transición: 0.4slineal;
transición: 0.4slineal;
-webkit-transition-property: ancho, color de fondo;
-moz-transition-property: ancho, color de fondo;
-o-transition-property: ancho, color de fondo;
propiedad de transición: ancho, color de fondo;
-webkit-caja-sombra: 0 0 1píxeles 1píxelesrgb(0, 0, 0, 0.25), recuadro 0 1píxelesrgb(255, 255, 255, 0.1);
sombra de la caja: 0 0 1píxeles 1píxelesrgb(0, 0, 0, 0.25), recuadro 0 1píxelesrgb(255, 255, 255, 0.1);
}

#cinco:comprobado ~ .Progreso > .barra de progreso {
ancho: 5%;
color de fondo: #f63a0f;
}

#Veinticinco:comprobado ~ .Progreso > .barra de progreso {
ancho: 25%;
color de fondo: #f27011;
}

#cincuenta:comprobado ~ .Progreso > .barra de progreso {
ancho: 50%;
color de fondo: #f2b01e;
}

#setenta y cinco:comprobado ~ .Progreso > .barra de progreso {
ancho: 75%;
color de fondo: #f2d31b;
}

#cien:comprobado ~ .Progreso > .barra de progreso {
ancho: 100%;
color de fondo: #86e01e;
}

.radio {
pantalla: ninguno;
}

.etiqueta {
pantalla: bloque en línea;
margen: 0 5px 20px;
relleno: 3px 8px;
color: #aaa;
sombra de texto: 0 1px negro;
borde-radio: 3px;
cursor: puntero;
}