Fully Customizable Simple Progress Circular Bar Using Pure Vanilla JavaScript

Progress Circular Bar is a very important design to present and display your informative data value to user and it is counted in the latest beautiful UI element as you have seen in many dashboards. There are many Progress Circular Bar snippets available over the internet with a lot of coding sand styles that are best too but here we are sharing a simple Progress Circular Bar using pure Vanilla JavaScript and fully customizable.

You can use as many as you want even on single web page with different customization to everyone with easiness. You can control the diameter of the Progress Circular Bar, with the border of the Progress Circular Bar, the value of the Progress Circular Bar, and the color of the Progress Circular Bar as well. The code is short and a general function that will work with any of your applications.

There are many snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

HTML:

<div class="progressCircularBarContainer">
<div class="progressCircularBar" id="dirrerentIDForEachCircle" data-percent="75" data-size="300" data-line="30"></div>
<b>Status</b>
</div>

CSS:

.progressCircularBarContainer {text-align:center;display:inline-block;}
.progressCircularBarContainer b {text-align:center;clear:both;display:block;font-size:40px;color:#5c9cec;}
.progressCircularBar {position:relative;margin:10px;display:inline-block;}
.progressCircularBar canvas {display:block;position:absolute;top:0;left:0;}
.progressCircularBar span {color:#555;display:block;text-align:center;font-size:30px;font-weight:100;margin-left:5px;}

JavaScript:

progressCircularBar('dirrerentIDForEachCircle','#5c9cec');

function progressCircularBar(incomingID, incomingColor){
var el = document.getElementById(incomingID);
var options = {
percent: el.getAttribute('data-percent') || 25,
size: el.getAttribute('data-size') || 220,
lineWidth: el.getAttribute('data-line') || 15,
rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(0, percent || 1), 1);
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
ctx.strokeStyle = color;
ctx.lineCap = 'round'; // butt, round or square
ctx.lineWidth = lineWidth
ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle(incomingColor, options.lineWidth, options.percent / 100);

document.getElementById(incomingID).style.width = options.size+"px";
document.getElementById(incomingID).style.height = options.size+"px";
span.style.width = options.size+"px";
span.style.lineHeight = options.size+"px";
}

Customization:

You can customize it easily as we stated earlier. You can control the below things in the upper code.

• id="dirrerentIDForEachCircle" Use a unique ID in each of your progress circular bar if you are using many bars at a single web page.
• data-percent="75" Change the value of the progress circular bar.
• data-size="300" Change the diameter of the progress circular bar.
• data-line="30" Change the width of the circle in progress circular bar
• progressCircularBar('dirrerentIDForEachCircle','#5c9cec'); Call this function with required parameters every time when you need to display progress circular bar.

That’s all you have to change. Rest you can change anything if you are pro in coding. Else do not change anything else.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article…