如何实现1秒完成循环重置的HTML/CSS/JavaScript进度条？

原代码存在以下关键问题导致无法实现需求：

• 未初始化value变量，且仅在setInterval中自增，但从未调用updateProgressBar函数，进度条UI完全无更新
• 模板字符串误用单引号，'${value}%'会被当成普通文本输出，无法解析变量
• 1000ms的定时器间隔导致1秒仅增加1%，远达不到1秒内填满进度条的要求

以下是修正后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环进度条</title>
    <style>
        .progress {
            position: relative;
            width: 510px;
            height: 60px;
            background: #9cbab4;
            overflow: hidden;
          
        }
        .progress__fill {
            width: 0%;
            height: 100%;
            background: #009579;
            transition: all 0.01s; /* 缩小过渡时间，让动画更流畅 */
        }

        .progress__text{
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            font: bold 20px 'Quicksand', sans-serif;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress__fill"></div>
        <span class="progress__text">0%</span>
    </div>
    <script>
        let value = 0; // 初始化进度值
        const progressBar = document.querySelector('.progress'); // 获取进度条容器

        // 每10ms更新一次，1秒内完成100次更新（从0到100%）
        setInterval(function(){
            value += 1;
            if (value > 100) {
                value = 0; // 进度满后重置
            }
            updateProgressBar(progressBar, value); // 调用更新函数
        }, 10);

        function updateProgressBar(progressBar, value){
            // 改用反引号实现模板字符串解析变量
            progressBar.querySelector(".progress__fill").style.width = `${value}%`;
            progressBar.querySelector(".progress__text").textContent = `${value}%`;
        }
    </script>
</body>
</html>

关键修改说明：

• 初始化value变量为0，提前获取进度条DOM元素避免重复查询
• 将定时器间隔改为10ms，每次增加1%，100次后刚好1秒填满进度条，匹配需求
• 加入判断逻辑，当value超过100时重置为0，实现自动循环
• 修复模板字符串为反引号，确保变量被正确解析
• 缩小进度条填充的过渡时间到0.01s，让动画更流畅适配高频更新

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