How to make a circular progress bar for web?

Asked

Viewed 1,633 times

0

Like the image attached below

inserir a descrição da imagem aqui

javascript html css
  • 1

    Take a look at this site, analyzing the font will notice that it is quite simple to create with pure css. http://www.cssscript.com/demo/pure-css-circular-percentage-bar/

  • 1

    @Lucasfile this example uses deprecated css properties for example clip property

  • Want to post what you tried to do and the exact difficulty.

  • It would also be good an excerpt of code and a context where it will be used, so that the answer can actually solve the problem.

  • Hey, Bacco. Lennon already answered what I wanted to know.

  • 1

    The tip is to put the details in the next, because imagine that his answer did not serve you for some detail, then it would be lost time of both parts. The more details in the next few, the better. I’m glad this case worked.

  • Yeah, thanks for the tip.

Show 2 more comments

1 answer

6


I will contribute..

var el = document.getElementById('graph'); // get canvas

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, 24a0);
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('#555555', options.lineWidth, options.percent / 100);
div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

input {
    width: 200px;
}

span {
  
}
<div class="chart" id="graph" data-percent="88"></div>

Now just change the attribute data-percent for the percentage you want.

  • 2

    Thank you, Lennon.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.