UIkit框架：页面加载时进度条从0到目标值的动画实现

我来帮你把这个页面加载时进度条从0动画到目标值的实现拆解清楚，结合你给出的示例细节来梳理：

首先看HTML结构，你给出的示例里有个小细节：初始value设成了50，如果要实现从0开始的动画，得把它改成0才行：

<progress id="js-progressbar" style="direction:rtl;" class="uk-progress" value="0" min="0" max="100"></progress>

这里的direction:rtl是让进度条从右往左填充，uk-progress是UIkit的样式类，用来美化进度条外观。

然后是JS部分，用UIkit的就绪事件来确保DOM加载完成后再执行动画：

UIkit.util.ready(function () {
  // 获取进度条DOM元素
  var bar = document.getElementById('js-progressbar');
  // 设置定时器，每1秒更新一次进度
  var animate = setInterval(function () {
    // 每次进度增加10
    bar.value += 10;
    // 当进度达到最大值时，停止动画
    if (bar.value >= bar.max) {
      clearInterval(animate);
    }
  }, 1000);
});

这段代码的逻辑很直白：

• 用UIkit.util.ready代替原生的DOMContentLoaded，确保UIkit相关元素加载完成后再操作
• 每秒给进度条的value加10，直到达到max（也就是100）时清除定时器，结束动画

如果觉得基础版的动画太生硬（每次跳10%），可以调整增量和间隔，还能自定义目标值，比如：

<progress id="js-progressbar" class="uk-progress" value="0" min="0" max="100"></progress>

UIkit.util.ready(function () {
  const bar = document.getElementById('js-progressbar');
  const targetProgress = 75; // 自定义你要的目标进度值，比如75%
  const step = 0.5; // 每次增加的小步长，让动画更丝滑
  const updateInterval = 20; // 每20毫秒更新一次

  const progressTimer = setInterval(() => {
    bar.value += step;
    // 当进度达到目标值时停止，并且确保最终值准确
    if (bar.value >= targetProgress) {
      bar.value = targetProgress;
      clearInterval(progressTimer);
    }
  }, updateInterval);
});

这样调整后，动画会流畅很多，而且你可以随意修改targetProgress来设置你想要的最终进度。

内容的提问来源于stack exchange，提问作者Yusuf Nalbantoğlu