Implement a fan-shaped loading dynamic graph using canvas

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>loading</title>

<style>

#box{

font-size: 20px;

font-weight: bold;

color:red;

padding-left: 200px;

}

</style>

</head>

<body>

	<canvas id='can' width='500px' height='500px'></canvas>

	<div id='box'></div>

	let can = document.getElementById('can');

	let box = document.getElementById('box');

	let ctx = can.getContext('2d');

// Method of drawing fan shapes

	CanvasRenderingContext2D.prototype.sector = function(x,y,r,bDeg,eDeg){

this.save();

this.beginPath();

this.moveTo(x,y);

		this.arc(x,y,r,bDeg*Math.PI/180,eDeg*Math.PI/180);

this.closePath();

this.restore();

return this;

}

//Let the fan shape be drawn continuously until it becomes a circle

var timer = null;

var angle = 0;

var number = 0;

box.innerText = number + ' %';

// Fill color

ctx.fillStyle = 'red';

	timer = setInterval(function(){

angle += 5;

		number = ((angle/360) * 100).toFixed(2);

box.innerText = number + ' %';

		ctx.sector(250,250,100,0,angle).fill();

if(angle == 360){

clearInterval(timer);

}

},200);

</script>

</body>

</html>