Displaying the progress of an ongoing operation to the users is one of the best way of representing a process progress in web applications. Now here is how to spice it up a bit, Making the progress bar in circular shape is now the most used style for a process that might take long. This is also very useful when you want to use a progress bar to represent any form of rating in percentage in your own applications. It make it look more presentable than the basic old lame rectangular progress bar.
![How to Create a Circular Shape Progress Bar Using HTML5 Canvas](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZARyAuJrD9vqD0LTOW62IJQoGrLY89Sb-iSStv8y8lI6CupY96tu1uPG8CQnL8999OcbgKc-6WE89-csZigauRnI_vrwrAsc4nT9pWLKblV8tAHqkttoHzxAas21v3r4VllbI1wIo3G0/s1600/bar.png)
Let first create our canvas using HTML5 canvas element tag.
<div class="chart" id="graph" data-percent="2"></div>
Now let use JavaScript to draw on our new canvas, The Bar progress will be triggered by a button.
var el = document.getElementById('graph'); // get canvas
var inc = document.getElementById("inc");
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('#4ec120', options.lineWidth, options.percent / 100);
inc.onclick=function(){
setInterval(function(){
options.percent=parseInt(options.percent)+2;
if (!(options.percent > 100)) {
span.textContent = options.percent+ '%';
drawCircle('#4ec120', options.lineWidth, options.percent / 100);
}
}, 100);}
var inc = document.getElementById("inc");
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('#4ec120', options.lineWidth, options.percent / 100);
inc.onclick=function(){
setInterval(function(){
options.percent=parseInt(options.percent)+2;
if (!(options.percent > 100)) {
span.textContent = options.percent+ '%';
drawCircle('#4ec120', options.lineWidth, options.percent / 100);
}
}, 100);}
The end.
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment