如何用CSS将进度条圆点修改为设计稿样式并嵌入进度条

问题 #

已实现基于progress值定位的进度条，但无法将圆点修改为设计稿中的嵌入式环形样式（白色内圈+深色外圈，与进度条融合）。现有代码如下：

JavaScript

// 假设后端传来的值是30
var progress = 10;

// 计算小圆点的位置
var dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";

CSS

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

#progress-bar-container {
  width: 600px;
  height: 5px;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.progress-bar {
  width: 33.33%;
  height: 5px;
  background-color: #fff;
  margin-right: 8px;
  border-radius: 20px;
}

#progress-bar-1 {
  background-color: #ddd;
}

#progress-bar-2 {
  background-color: #ddd;
}

#progress-bar-3 {
  background-color: #ddd;
  margin-right: 0;
}

#dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
  top: -3px;
  left: 0;
  transition: left 0.2s ease-out;
}

HTML

<div id="progress-bar-container">
  <div class="progress-bar" id="progress-bar-1"></div>
  <div class="progress-bar" id="progress-bar-2"></div>
  <div class="progress-bar" id="progress-bar-3"></div>
  <div id="dot"></div>
</div>

实现方案 #

调整#dot的CSS样式并优化定位逻辑，即可实现设计稿效果：

• 将实心圆点改为环形：通过border设置外圈，background设为白色填充
• 优化定位：使用top:50%+transform: translate(-50%, -50%)让圆点垂直居中且中心对准进度位置
• 提升层级：确保圆点在进度条上方显示

修改后的完整代码：

JavaScript

// 假设后端传来的值是30
var progress = 10;

// 计算小圆点的位置
var dot = document.getElementById("dot");
var dotPosition = (progress / 30) * 100;
dot.style.left = dotPosition + "%";

CSS

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

#progress-bar-container {
  width: 600px;
  height: 5px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.progress-bar {
  width: 33.33%;
  height: 5px;
  background-color: #ddd;
  margin-right: 8px;
  border-radius: 20px;
}

#progress-bar-3 {
  margin-right: 0;
}

#dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #333; /* 可根据设计稿调整外圈颜色 */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  transition: left 0.2s ease-out;
  z-index: 1;
}

HTML

<div id="progress-bar-container">
  <div class="progress-bar" id="progress-bar-1"></div>
  <div class="progress-bar" id="progress-bar-2"></div>
  <div class="progress-bar" id="progress-bar-3"></div>
  <div id="dot"></div>
</div>

补充说明 #

• 若设计稿中外圈颜色、圆点尺寸不同，直接修改border-color、width/height即可
• transform: translate(-50%, -50%)解决了圆点左边缘对准进度位置的偏移问题，让圆点中心精准匹配进度值

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