var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var segments = {};
segments['0'] = {
last: 0,
height: 15,
distanceToOuter: 30,
broke: false,
incValue: 0.5
};
var percentage = 0;
var lastPercentage = 0;
var maxPercentage = 100;
//simulate download
(function loop() {
setTimeout(function () {
//set segment start size
lastPercentage = percentage;
percentage += 10;
//push segment into object stack
segments[percentage] = {
last: lastPercentage,
height: 15,
distanceToOuter: 30,
broke: false,
incValue: 0.5
};
//if percentage is under 100, continue to loop
if (percentage === 100) {
segments[100].broke = true;
segments[segments[100].last].broke = true;
} else if (percentage === 0) {
segments[0].broke = true;
} else {
segments[lastPercentage].broke = true;
}
if (percentage < maxPercentage) {
loop();
draw(percentage);
requestAnimationFrame(increaseDistanceToOuter);
}
}, 100);
}());
function draw(percentage) {
//clear canvas
ctx.clearRect(0, 0, 300, 300);
//draw white circle
ctx.beginPath();
ctx.lineWidth = 15;
ctx.strokeStyle = 'white';
ctx.arc(150, 150, 120, toRadians(0), toRadians(360));
ctx.stroke();
//draw text
ctx.fillStyle = 'green';
ctx.font = "26pt Arial";
ctx.textAlign = "center";
ctx.fillText(percentage/10, 150, 158);
//draw segments
for (var key in segments) {
circleSegment(
Math.floor(segments[key].last * 3.6),
Math.ceil(key * 3.6),
segments[key].height,
segments[key].distanceToOuter
);
}
}
function increaseDistanceToOuter() {
for (var key in segments) {
if (!segments[key].broke) {
segments[key].height += segments[key].incValue;
segments[key].incValue = segments[key].incValue / 2;
segments[key].distanceToOuter += 0.05;
} else {
if (segments[key].distanceToOuter < 120) {
segments[key].distanceToOuter++;
} else if (segments[key].distanceToOuter >= 120) {
segments[key].height = 15;
segments[key].distanceToOuter = 120;
}
}
}
draw(percentage);
requestAnimationFrame(increaseDistanceToOuter);
}
function toRadians(deg) {
return deg * Math.PI / 180;
}
function circleSegment(degreesFrom, degreesTo, thickness, distanceToOuter) {
ctx.beginPath();
ctx.lineWidth = thickness;
ctx.strokeStyle = 'green';
ctx.arc(150, 150, distanceToOuter, toRadians(degreesFrom), toRadians(degreesTo));
ctx.stroke();
}
html, body {
background-color: lightgrey;
}
<canvas id="canvas" width="300" height="300"></canvas>