Barra di avanzamento bootstrap con colore sfumato che mostra proporzionalmente la larghezza attiva

Question

Ho bisogno di creare una barra di avanzamento Bootstrap riempita con un colore sfumato (diciamo rosso con verde). Il mio CSS attualmente si presenta così:

.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%); 
} 

e il codice HTML per andare con esso è questo:

<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> 

Questo visualizza il gradiente, ma per l'esempio precedente (60%), visualizza l'intero gradiente spettro di colori attraverso la regione attiva del 60%. Ho bisogno di cambiare questo in modo che (per esempio) per il 60%, viene visualizzato solo il 60% dello spettro di colori del gradiente.

Qualcuno ha qualche idea su come raggiungere questo obiettivo? Preferirei una soluzione CSS pura, ma se jQuery è necessario per raggiungere questo obiettivo, sarebbe anche OK.

Answer 1

Per modificare dinamicamente la "quantità", suggerirei di utilizzare jquery (o vaniglia js, a seconda di quale si preferisca) per regolare la barra di avanzamento.

Ho utilizzato l'attributo data per completare il valore della barra di avanzamento, nonché il testo (quindi è sufficiente modificarlo in un unico punto).

---

Questo significa che tutto ciò che dovete fare è modificare l'attributo

data-amount 

ad un valore compreso tra 0 e 100%.

---

Demo

$(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>

questo realisticamente è solo utilizzando due elementi, quindi dovrebbe essere abbastanza buona prestazione saggia.

NOTA

Sembra che ci sia un po 'di jQuery utilizzato in questa risposta; e questo è dovuto alla DEMO e non all'uso effettivo.

Answer 2

Modifica l'elemento che presenta il gradiente, dalla barra di avanzamento all'avanzamento.

E. per mascherarlo, usa un'ombra bianca sulla barra di avanzamento.

modifiche necessarie allo stile:

.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; 
} 

La pendenza nel .progress sarà visibile attraverso il fondo trasparente in corso-bar.

Ma fuori l'avanzamento barra, verrà mascherato dall'ombra