Guage Graph

by Ben Clayton

HTML

<div class="container">
    <div id="activeBorder" class="active-border">
        <div id="circle" class="circle">
            <span class="prec">2500</span>
        </div>
    </div>
</div>

CSS

.container{
    width:210px;
    height: 210px;
    margin: 100px auto;
    background-image:url(http://previews.123rf.com/images/alexsmith/alexsmith1103/alexsmith110300107/9147841-White-strips-on-red-background-Stock-Vector-spiral.jpg);
    background-size:cover;
    border-radius:100%;
    overflow:hidden;
}
.prec{
    top: 60px;
    position: relative;
    font-size: 30px;
}


.circle{
    position: relative;
    top: 20px;
    left: 20px;
    text-align: center;
    width: 170px;
    height:170px;
    border-radius: 100%;
    background-color: #FFFFFF;
}

.active-border{
    position: relative;
    text-align: center;
    width: 210px;
    height: 210px;
    border-radius: 100%;

    background-image:linear-gradient(90deg, transparent 50%, #FFFFFF 50%),linear-gradient(90deg, #FFFFFF 50%, transparent 50%);
    
}

JavaScript

$(function drawSector(){
    var activeBorder = $("#activeBorder");
    var deg = 180;
    var startDeg = 230;
 
 if (deg <= 180){
 
 
        activeBorder.css('background-image','linear-gradient(' + (90+deg) + 'deg, transparent 50%, #FFFFFF 50%),linear-gradient(90deg, #FFFFFF 50%, transparent 50%)');
    }
    else{
        activeBorder.css('background-image','linear-gradient(' + (deg-90) + 'deg, transparent 50%, #FFFFFF 50%),linear-gradient(90deg, #FFFFFF 50%, transparent 50%)');
    }
    
   activeBorder.css('transform','rotate(' + startDeg + 'deg)');
   $("#circle").css('transform','rotate(' + (-startDeg) + 'deg)');
});