Barras de progreso animadas

El siguiente ejemplo está basado en el trabajo realizado por Lazarevic Ivan, se agregan algunas cosas para que cambie de color dependiendo del valor que se le dé a la barra de progreso, para realizarlo utiliza jQuery aunque se puede omitir utilizando solo JavaScript.

1.- Agregamos las etiquetas HTML a nuestro proyecto.

<div id="progress">
  <div></div>
</div>

2.- Le daremos estilo la division que funcionara como fondo vacio de la barra de progreso.

/** división padre**/
#progress {
    width: 300px;
    height: 30px;
    border: 1pt solid #111;
    border-radius: 4px;
    background: #404040;
    border: 1px solid #272727;
    overflow: hidden;
    box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;
}
/** división hijo **/
#progress div {
    height: 300px;
    color: #404040;
    text-align: right;
    line-height: 30px;
    /* mismo tamaño que la división padre*/
    width: 0;
    border-right: 1px solid #272727;
}

Tendriamos algo asi…

3.- Vamos a crear los estilos para las clases que asignaremos en base a los colores que queramos (con animación) dependiendo del porcentaje que tengan, en este caso vamos a utilizar los siguientes:

• Color rojo : 0 – 25 %
• Color naranja: 26 – 50%
• Color verde: 51 -75%
• Color azul: 76 -100%

.progress-min {
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #d43535;
    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
}

.progress-mid {
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #ea8209;
    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
}

.progress-average {
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: #00cb08;
    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
}
.progress {
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-color: CornflowerBlue;
    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
}
@-webkit-keyframes progress {
    to {
        background-position: 30px 0;
    }
}

@-moz-keyframes progress {
    to {
        background-position: 30px 0;
    }
}

@keyframes progress {
    to {
        background-position: 30px 0;
    }
}

4.- Ahora en JavaScript vamos a modificar el archivo original para agregar las clases al elemento dependiendo del porcentaje que se maneje, la función recibe el numero (porcentaje) y el elemento div con el ID «progress».

function progressBar(percent, element) {
    var progress = element.find('div');
    progress.removeClass();
    if (percent <= 25)
        progress.addClass('progress-min');
    else if (percent <= 50 & percent > 25)
        progress.addClass('progress-mid');
    else if (percent <= 75 & percent > 50)
        progress.addClass('progress-average');
    else if (percent > 75)
        progress.addClass('progress');
    progress.animate({ width: percent + '%' }, 500).html(percent + "%&nbsp;");
}

Eso seria todo, un ejemplo completo:

Aqui otro ejemplo con imagenes de fondo en lugar de los colores y la animación.