如何用JavaScript实现从两端向中间耗尽的进度条？

要实现从两端同时耗尽、最终在中间完成的进度条，你可以基于CSS自定义属性和动画（或JS控制）来实现，以下是两种实用方案：

方案1：纯CSS自动播放版 #

这种方案无需JS，直接通过CSS动画完成从满状态到完全耗尽的效果，视觉流畅且易于调整：

<div class="timer-bar"></div>

.timer-bar {
  --duration: 5s; /* 可自定义总耗时 */
  width: 100%;
  height: 24px;
  background-color: #e0e0e0; /* 进度条底色 */
  position: relative;
  overflow: hidden;
  border-radius: 12px; /* 可选：添加圆角优化视觉 */
}

.timer-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #2196f3; /* 进度条填充色 */
  animation: shrink-both-ends var(--duration) linear forwards;
}

@keyframes shrink-both-ends {
  0% {
    /* 初始状态：完全显示 */
    clip-path: inset(0 0 0 0);
  }
  100% {
    /* 结束状态：左右各裁剪50%，进度条完全耗尽 */
    clip-path: inset(0 50% 0 50%);
  }
}

原理说明 #

利用clip-path: inset()属性动态裁剪进度条的可见区域：动画从左右两端同时向内收缩，最终裁剪至中间线（宽度为0），实现“从两端耗尽”的效果。通过--duration自定义属性可以快速调整总耗时。

方案2：JS可控版 #

如果需要手动控制进度（比如暂停、重置、根据业务逻辑调整进度），可以用自定义属性配合JS实现：

<div class="timer-bar"></div>

.timer-bar {
  width: 100%;
  height: 24px;
  background-color: #e0e0e0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.timer-bar::before {
  content: "";
  position: absolute;
  top: 0;
  /* 左右边距随--progress变量同步增加 */
  left: calc(var(--progress, 0) * 0.5%);
  right: calc(var(--progress, 0) * 0.5%);
  height: 100%;
  background-color: #2196f3;
  transition: left 0.1s, right 0.1s; /* 可选：添加过渡动画让变化更平滑 */
}

const timerBar = document.querySelector(".timer-bar");
let progress = 0;
const totalDuration = 5000; // 总耗时5秒
const interval = setInterval(() => {
  progress += (100 / (totalDuration / 50)); // 每50ms更新一次进度
  timerBar.style.setProperty("--progress", progress);
  
  if (progress >= 100) {
    clearInterval(interval);
    console.log("进度条已耗尽");
  }
}, 50);

原理说明 #

通过CSS变量--progress控制进度条的左右边距：当--progress从0增加到100时，左右边距各从0增加到50%，进度条的可见区域就会从两端向中间收缩。JS部分负责按时间递增--progress的值，也可以根据需求随时修改该变量实现暂停、重置等操作。

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