定制扇形刻度环形进度条开发求助（带箭头及自定义最大值）

需求说明 #

• 扇形进度条，起始角度30°，结束角度150°
• 带有刻度标识
• 进度箭头随进度同步旋转
• 支持按设定最大值展示进度

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扇形刻度进度条</title>
</head>
<body>
    <div class="container">
        <svg viewBox="0 0 500 500">
            <!-- 背景刻度圆弧 -->
            <path id="scale-arc" d="M396.41 250 A146.41 146.41 0 0 1 103.59 250" />
            <!-- 进度圆弧 -->
            <path id="progress-arc" d="M396.41 250 A146.41 146.41 0 0 1 103.59 250" />
            <!-- 进度箭头 -->
            <polygon id="progress-arrow" points="250,80 260,95 240,95" />
        </svg>
        <div class="progress-text">
            <span id="current-rate">0%</span>
            <span class="max-text">/ 100%</span>
        </div>
    </div>
</body>
</html>

CSS代码 #

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    width: 500px;
    height: 500px;
    margin: 100px auto;
    position: relative;
}
svg {
    width: 100%;
    height: 100%;
    transform: rotate(30deg); /* 对齐30°起始位置 */
}
/* 背景刻度样式 */
#scale-arc {
    fill: none;
    stroke: #273e53;
    stroke-width: 20px;
    stroke-dasharray: 4.5, 10; /* 短刻度+间隔，控制刻度密度 */
    stroke-linecap: round;
}
/* 进度圆弧样式 */
#progress-arc {
    fill: none;
    stroke: #ffffff;
    stroke-width: 22px;
    stroke-dasharray: 527.79; /* 扇形圆弧长度：(150-30)/360 * 2π*146.41 ≈ 527.79 */
    stroke-dashoffset: 527.79; /* 默认完全隐藏 */
    stroke-linecap: round;
    transition: stroke-dashoffset 0.05s ease;
}
/* 进度箭头样式 */
#progress-arrow {
    fill: #ffffff;
    transform-origin: 250px 250px; /* 以圆心为旋转原点 */
    transition: transform 0.05s ease;
}
/* 进度文本样式 */
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 80px;
    color: aquamarine;
    text-align: center;
}
.max-text {
    font-size: 40px;
    opacity: 0.7;
}

JavaScript代码 #

// 配置参数
const config = {
    maxValue: 100,
    currentValue: 0,
    duration: 5000, // 动画总时长（毫秒）
    updateInterval: 50 // 更新间隔（毫秒）
};

// 扇形圆弧总长度
const arcTotalLength = 527.79;

let interval = setInterval(updateProgress, config.updateInterval);
let step = (config.maxValue / (config.duration / config.updateInterval));

function updateProgress() {
    config.currentValue += step;
    if (config.currentValue >= config.maxValue) {
        config.currentValue = config.maxValue;
        clearInterval(interval);
    }

    // 计算进度比例
    const progressRatio = config.currentValue / config.maxValue;
    // 更新进度圆弧
    document.getElementById('progress-arc').style.strokeDashoffset = arcTotalLength - (progressRatio * arcTotalLength);
    // 更新箭头旋转角度（30°起始，到150°结束，总旋转120°）
    const arrowRotateAngle = 30 + (progressRatio * 120);
    document.getElementById('progress-arrow').style.transform = `rotate(${arrowRotateAngle}deg)`;
    // 更新文本
    document.getElementById('current-rate').textContent = `${Math.round(config.currentValue)}%`;
}

关键改动说明 #

1. SVG结构优化：

   • 用<path>绘制精准的扇形圆弧，替代原<circle>，实现30°-150°的范围控制
   • 添加独立箭头元素，通过旋转实现进度跟随

2. CSS核心调整：

   • 调整SVG旋转角度对齐30°起始点
   • 基于扇形实际周长设置stroke-dasharray，通过stroke-dashoffset控制进度显示
   • 给箭头设置圆心为旋转原点，保证旋转轨迹正确

3. JS逻辑重构：

   • 提取可配置参数，方便修改最大值、动画时长
   • 根据进度比例同步计算箭头旋转角度和圆弧进度
   • 平滑更新动画状态，保证流畅性

内容的提问来源于stack exchange，提问作者Vicky