The effect is as follows:

The source code is as follows, directly copy and save as an HTML file to preview:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial -scale=1.0"> </title> </head> <body> <canvas id="canvas" width="300" height="300"> <p> Canvas </p> </canvas> <script> /** */ function toCanvas(id, color, Progress) {var canvas = document.getElementById(id), CTX = document.getContext (" 2D "), percent = progress, // circleX = Canvas. Width / 2, circleY = Canvas. Height / 2, circleY = Canvas. Height / 2, circleY = Canvas. Height / 2, // // canvas radius lineWidth = 6, // circle width fontSize = 20; Function SmallCircle1 (cx, cy, r) {// ctx.beginPath(); // //ctx.moveTo(cx + r, cy); // ctx.lineWidth = 1; // ctx.fillStyle = '#06a8f3'; // ctx.arc(cx, cy, r, 0, Math.PI * 2); // ctx.fill(); // } // function smallcircle2(cx, cy, r) { // ctx.beginPath(); // //ctx.moveTo(cx + r, cy); // ctx.lineWidth = 1; // ctx.fillStyle = '#fff'; // ctx.arc(cx, cy, r, 0, Math.PI * 2); // ctx.fill(); Function circle(cx, cy, r, sAngle, eAngle, bColor = '#eee') {ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = bColor; // ctx.lineCap = 'round'; // ctx.arc(cx, cy, r, Math.PI * 1, Math.PI * 2); ctx.arc(cx, cy, r, sAngle, eAngle); ctx.stroke(); } function sector(cx, cy, r, startAngle, endAngle, _lineWidth) {ctx.beginPath(); //ctx.moveTo(cx, cy + r); // Start at the bottom of the circle and draw ctx.lineWidth = _lineWidth; // var linGrad = ctx. createInearGradient (// circlex-radius-linewidth, circleY, circleX+radius+lineWidth, circleY // ); / / linGrad addColorStop (0.0, '# 06 a8f3'); / / / / linGrad addColorStop (0.5, '# 9 bc4eb'); / / linGrad addColorStop (1.0, '# 00 f8bb'); // ctx.strokeStyle = linGrad; // ctx. strokStyle = color; // ctx.linecap = 'round'; Arc (cx, cy, r, startAngle, (Math.pi * (1.5 - ((1.5/100) * process)), true); ctx.stroke(); } // Refresh function Loading () {if (process >= percent) {clearInterval(circleLoading); } // Clear canvas ctx.clearRect(0, 0, circleX * 2, circleY * 2); // ctx.font = fontSize + 'px April'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#999'; ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY - 10); ctx.font = (fontSize - 4) + 'px April'; ctx.fillStyle = '##a7a7a7'; Ctx. fillText(' Security ', circleX, circleY + 20); circle(circleX, circleY, radius + 14, 0, Math.PI * 2, '#e1f7f3'); // circle(circleX, circleY, radius, 0, Math.pi * 1.5, '#6bd8b3'); // CircleX (circleX, circleY, Radius-8, Math.pi * 1.5, 0, Linewidth * 2); // SmallCircle1 (Cradius + Math.cos(2 * Math.pi / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) * // radius, 0); // smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI / // 360 * (120 + process * 3)) * radius, 2); If (process/percent bb0 0.90) {process += 0.30; } else if (process/percent > 0.80) {process += 0.55; } else if (process/percent > 0.70) {process += 0.75; } else {process += 1.0; } var process = 0.0; Var circleLoading = window.setInterval(function() {Loading (); console.log(11) }, 20); // loading(); } toCanvas('canvas','#6bd8b3', 32); </script> </body> </html>