Create Dynamic Half Circular Progress Bar With HTML 5 CSS 3 - Create Gauge Chart In HTML 5

Recently in one of my project there was a requirement to create half circle gauge chart to show progress of some actions. Something like below image

So first of all I decided to use some charts library to create UI like this but since this was mobile application I do not find any suitable chart library. So I decided to build UI from scratch. So here is the step by step guide. 

First our basic HTML and CSS

<div style="visibility: hidden" class="container" id="container">

                       <div id="border" class="active-border">

                            <div id="circle" class="circle">

                               <div id="needle" class="needle"></div> 

                            </div>

                        </div>

                      </div>

Now the basic CSS.

.container{

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: relative;

    top: -25%;

}

.circle{

    position: relative;

    top: 5px;

    left: 5px;

    text-align: center;

    width: 200px;

    height: 200px;

    border-radius: 100%;

    background-color: rgba(0,0,0,1);

}

.border{

    position: relative;

    text-align: center;

    width: 210px;

    height: 210px;

    border-radius: 100%;

    top : 50%;

    background-color:#00a651;

}

.needle {

    position: absolute;

    background-color: #f0566f;

    height: 100%;

    width: 0.5%;

    left: 50%;

}

.needle:before {

    content: "";

    position: absolute;

    top: 0px;

    left: -10px;

    width: 0px;

    height: 0px;

    border-top: 10px solid transparent;

    border-right: 20px solid #f0566f;

    border-bottom: 10px solid transparent;

    -webkit-transform: rotate(90deg);

}

Now here comes the dynamic things. first of we have to set height and width of all the elements inside container to screen width and height.

var containerWidth = 0;

if(document.getElementById('container').clientHeight > document.getElementById('container').clientWidth){

containerWidth = document.getElementById('container').clientWidth;

}

else{

containerWidth = document.getElementById('container').clientHeight;

}

var circleWidth =  containerWidth - 10;

var activeBorderWidth =  containerWidth;

var padding = (document.getElementById('container').clientWidth - document.getElementById('container').clientHeight) / 2;

document.getElementById('circle').style.width = circleWidth + 'px';

document.getElementById('circle').style.height = circleWidth + 'px';

document.getElementById('container').style.paddingLeft = padding + 'px';

document.getElementById('border').style.width = activeBorderWidth + 'px';

document.getElementById('border').style.height = activeBorderWidth + 'px';

So as you can see we are setting border with to container width and make it fit inside container and setting inner circle width to bit less than border width to create circular progress bar. Now we calculate transform degrees to set up liner gradient to show progress. 

var degree = (180 * Number(count)) / (Number(total));

document.getElementById('border').style.background = '-webkit-linear-gradient('+degree+'deg, #9a9a9a 50%, #00a651 50%)';

As you can see since we have half circle we are calculating degrees by 180. If you want full circle progress bar then calculate it with 360 degree.                 

Now set needle transformation.

var needleTransformDegree = 180 - degree;

document.getElementById('needle').style.webkitTransform = 'rotate('+needleTransformDegree+'deg)';
               
document.getElementById('container').style.visibility = 'visible'

That's it and end result look something like below.

Hope this helps you.