bootstrap - progress bar jquery

Barra de progreso Bootstrap con color degradado que se muestra proporcionalmente en ancho activo

Question

Necesito hacer una barra de progreso de Bootstrap que esté llena con un color degradado (digamos rojo a verde). Mi CSS actualmente se ve así:

.progress-lf {
    position: relative;
    height: 31px;
    background-color: rgba(51, 51, 51, 0.4)
}

.progress-lf span {
    position: absolute;
    display: block;
    font-weight: bold;
    color: #d2d2d2;
    width: 100%;
    top:6px;
}

.progress-lf .gradient {
    background-color: transparent;
    background-image: -ms-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -moz-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -o-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E34747), color-stop(100, #5FB365));
    background-image: -webkit-linear-gradient(left, #E34747 0%, #5FB365 100%);
    background-image: linear-gradient(to right, #E34747 0%, #5FB365 100%);
}

y el HTML para acompañarlo es este:

    <div class="progress progress-lf">
            <div class="progress-bar gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo mt_rand(0,100);?>%;">
                    <span>60% Complete</span>
            </div>
    </div>

Esto muestra el gradiente, pero para el ejemplo anterior (60%), muestra todo el espectro de color del degradado en la región activa del 60%. Necesito cambiar esto para que (por ejemplo) para el 60%, solo se muestre el 60% del espectro de color degradado.

¿Alguien tiene alguna idea sobre cómo lograr esto? Preferiría una solución CSS pura, pero si se requiere jQuery para lograr esto, también estaría bien.

Answer 1

Modifique el elemento que tiene el degradado, desde la barra de progreso hasta el progreso.

Y. para enmascararlo, use una sombra blanca en la barra de progreso.

Cambios requeridos al estilo:

.progress {
  background-image: linear-gradient(to right, #FFF, #00F);
}

.progress-bar {
  box-shadow: 0px 0px 0px 2000px white;   /* white or whatever color you like */
  background-image: none !important;
  background-color: transparent !important;
}

El gradiente en .progress será visible a través del fondo transparente en la barra de progreso.

Pero fuera de la barra de progreso, estará enmascarado por la sombra.

Answer 2

Para poder alterar dinámicamente la ''cantidad'', sugeriría usar jquery (o vanilla js, lo que se prefiera) para ajustar la barra de progreso.

He utilizado el atributo de datos para completar el valor de la barra de progreso, así como el texto (por lo que solo es necesario cambiarlo en un lugar).

Esto significa que todo lo que tienes que hacer es cambiar el

data-amount 

atribuir a un valor entre 0 y 100%.

Manifestación

 $(document).ready(function () {
    var dataval = parseInt($(''.progress'').attr("data-amount"));
    if (dataval < 100) {
        $(''.progress .amount'').css("width", 100 - dataval + "%");
    }

  /*FOR DEMO ONLY*/
    $(''#increase'').click(function () {
        modifyProgressVal(1);
    });
    $(''#decrease'').click(function () {
        modifyProgressVal(-1);
    });
    function modifyProgressVal(type) {
        dataval = parseInt($(''.progress'').attr("data-amount"));
        if (type == 1) dataval = Math.min(100,dataval + 10)
        else if (type == -1) dataval = Math.max(0,dataval - 10);
        $(''.progress .amount'').css("width", 100 - dataval + "%");
        $(''.progress'').attr("data-amount", dataval);
    }
});

.progress {
  position: relative;
  height: 31px;
  background: rgb(255, 0, 0);
  background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(0, 255, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=''#ff0000'', endColorstr=''#00ff00'', GradientType=1);
}
.amount {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transition: all 0.8s;
  background: gray;
  width: 0;
}
.progress:before {
  content: attr(data-amount)"% Complete";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  line-height: 31px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress" data-amount="80">
  <div class="amount"></div>
</div>


<!--FOR DEMO ONLY-->

<button id="increase">Increase by 10</button>
<button id="decrease">Decrease by 10</button>

esto es realista, solo está usando dos elementos, por lo que debería ser bastante bueno en cuanto al rendimiento.

NOTA

Parece que hay bastante jQuery usado en esta respuesta; y esto se debe a la DEMO y no al uso real.