如何在基于SSE更新的动态CSS进度条内添加数值文本？

核心思路 #

用绝对定位把进度文本独立于进度条元素，固定在容器居中位置，既不受进度条宽度变化影响，也不会遮挡进度条本身。

步骤1：调整HTML结构 #

给进度条容器（.progress）添加一个独立的文本元素，用来显示进度数值：

<div class="progress">
  <div class="progress-bar"></div>
  <span class="progress-text">0%</span>
</div>

步骤2：设置CSS样式 #

通过定位和层级控制，让文本始终居中且不被进度条遮挡：

.progress {
  position: relative; /* 作为绝对定位元素的参考容器 */
  width: 100%;
  height: 24px;
  background-color: #eee;
  border-radius: 12px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  transition: width 0.3s ease;
  z-index: 1; /* 让进度条在文本下方 */
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  z-index: 2; /* 确保文本在进度条上方 */
  pointer-events: none; /* 避免文本干扰进度条的交互（如果有的话） */
}

步骤3：修改JavaScript逻辑 #

在SSE接收数据时，同时更新进度条宽度和文本内容：

// 假设你的SSE连接逻辑已经存在
const eventSource = new EventSource('/your-sse-endpoint');
const progressBar = document.querySelector('.progress-bar');
const progressText = document.querySelector('.progress-text');

eventSource.onmessage = function(event) {
  const progress = parseInt(event.data);
  progressBar.style.width = `${progress}%`;
  progressText.textContent = `${progress}%`;
};

为什么这样可行？ #

• 文本元素通过绝对定位脱离文档流，完全不受.progress-bar的宽度变化影响，始终保持在容器居中位置。
• 通过z-index层级控制，文本显示在进度条上方，不会被遮挡；同时进度条的颜色可以根据需要调整，确保文本清晰可读（比如深色进度条用白色文本，浅色用深色）。
• pointer-events: none可以避免文本元素拦截鼠标事件，保证进度条容器的交互性（如果有需要的话）。

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