jQuery – JS Blog

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.

Etiqueta: jQuery

Barras de progreso animadas