CSS Range Meter

by Florent27000

HTML

<div class="progress-bar blue glow">
    <span style="width: 20%"></span>
</div>

<div class="progress-bar green glow">
    <span style="width: 60%"></span>
</div>

<div class="progress-bar red glow">
    <span style="width: 90%"></span>
</div>


<div id="moving-bar" class="progress-bar glow">
    <span style="width: 0%"></span>
</div>

<button id='Add10'>
    <span>+10%</span>
</button>

CSS

.progress-bar {
    background-color: #fafafa;
    height: 25px;
    padding: 1px;
    width: 350px;
    margin: 50px 0;         
    border-radius: 5px;
    border: 1px solid black;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;       
}

.progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;    
}

.blue span {
    background-color: #34c2e3;   
}

.green span {
      background-color: #3d8b3d;
      /* background-image: linear-gradient(top, #fecf23, #fd9215); */  
}   

.red span {
      background-color: #b52b27;
      /*background-image: linear-gradient(top, #a5df41, #4ca916); */  
}

.glow span {
    box-shadow: 0 3px 3px rgba(255, 255, 255, .7) inset, 0 -3px 3px rgba(255, 255, 255, .7) inset;            
}

JavaScript

barwidth = 0
$('#Add10').click(function(){
	barwidth = barwidth+10;
    $('#moving-bar span').width(barwidth+"%");
    
    if (barwidth > 00){
    	$('#moving-bar').removeClass("red");
        $('#moving-bar').removeClass("green");
    	$('#moving-bar').addClass("blue");
    }    
    if (barwidth > 50){
    	$('#moving-bar').removeClass("blue");
        $('#moving-bar').removeClass("red");
    	$('#moving-bar').addClass("green");
    }
    if (barwidth > 80){
    	$('#moving-bar').removeClass("blue");
        $('#moving-bar').removeClass("green");
    	$('#moving-bar').addClass("red");
    }
    if (barwidth >= 100){
    	barwidth = 0
    }
});