如何用CSS或JavaScript实现排名色块的动态跑动填充效果？

需求说明 #

现有包含30个小色块的排名条形图，原逻辑是根据后端返回的排名数值，直接将对应位置的span元素设为橙色。现需调整为：橙色色块从第一个开始，依次动态填充至目标排名位置，实现跑动的动画效果。

实现方案 #

核心思路是用定时器逐个给色块添加橙色样式，直到抵达目标排名位置：

• 获取所有色块元素集合
• 接收后端返回的目标排名值
• 通过setInterval创建循环，每次给当前索引的色块添加橙色样式，索引逐步递增
• 当索引达到目标排名时，清除定时器终止动画

修改后的完整代码 #

HTML（保持原有结构） #

<div class="anking">
  <div class="bar ehind">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="bar generally">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="bar good">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS（保持原有样式） #

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.anking {
  display: flex;
}

.anking .bar {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  margin: 0px 3px;
  border-radius: 10px;
  overflow:hidden;
}

.anking .bar span {
  display:inline-block;
  background-color: transparent;
  width: 16px;
  height: 190%;
/*   border-radius:2px; */
}

.anking .bar span.red {
  background: #EB781E;
}

JavaScript（核心逻辑修改） #

const blocks = document.querySelectorAll(".bar > span");
const mockValueFromServer = 16; // 模拟后端返回的排名，可替换为真实接口返回值
let currentIndex = 0;
const speed = 100; // 每个色块填充的间隔时间（单位：ms），数值越小动画越快

// 清除可能存在的旧定时器，避免重复触发
let timer = setInterval(() => {
  if (currentIndex < mockValueFromServer) {
    blocks[currentIndex].classList.add("red");
    currentIndex++;
  } else {
    clearInterval(timer);
  }
}, speed);

补充说明 #

• 若后端返回的排名可能超出30，可添加边界处理：const target = Math.min(mockValueFromServer, blocks.length)，避免索引越界
• 若需要重新触发动画（比如排名更新），需先执行clearInterval(timer)清除旧定时器，再重新创建新的定时器

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