简单的js进度圆

<canvas id="progressCircle" width="100" height="100"></canvas>

#progressCircle {
    display: block;
    margin: 0 auto;
}

function drawProgressCircle(canvas, percent) {
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(centerX, centerY) - 5;
    const circumference = 2 * Math.PI * radius;

    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the background circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.strokeStyle = '#eee';
    ctx.lineWidth = 10;
    ctx.stroke();

    // Draw the progress arc
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, -Math.PI / 2, (percent / 100) * 2 * Math.PI - Math.PI / 2);
    ctx.strokeStyle = '#007bff';
    ctx.lineWidth = 10;
    ctx.stroke();
}

// Usage
const canvas = document.getElementById('progressCircle');
let progress = 0;
const interval = setInterval(() => {
    if (progress > 100) {
        clearInterval(interval);
    } else {
        progress += 1;
        drawProgressCircle(canvas, progress);
    }
}, 50);