如何实现标记点位于进度条上方的渐变进度条？

要实现标记点位于进度条上方且匹配对应位置渐变色彩的效果，核心是让标记点精准定位到进度位置，并获取该位置的渐变颜色。以下是调整后的方案：

关键修改点 #

• 将标记点DOM移至进度条容器内，直接基于进度条宽度定位
• 使用CSS变量统一控制进度值，确保位置与颜色匹配
• 通过背景渐变的定位设置，让标记点显示对应进度位置的色彩

修改后的完整代码 #

<html>
<head>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
    }

    /* 容器样式，用CSS变量统一控制进度 */
    .progress-container {
      display: flex;
      align-items: center;
      gap: 10px;
      --progress: 15%;
      --bar-width: 300px;
    }

    /* 进度条容器 */
    .progress-bar {
      position: relative;
      height: 10px;
      width: var(--bar-width);
      background: linear-gradient(to right, #ff00ff, #00f0ff, #00ff99);
      border-radius: 5px;
    }

    /* 进度填充层 */
    .progress {
      height: 100%;
      width: var(--progress);
      /* 若需要未完成区域为灰色，可添加：background-color: #e0e0e0; */
    }

    /* 标记点样式 */
    .marker {
      position: absolute;
      top: -6px; /* 向上偏移至进度条上方 */
      left: var(--progress);
      transform: translateX(-50%); /* 水平居中到进度位置 */
      width: 15px;
      height: 15px;
      /* 复用进度条渐变，通过定位匹配对应位置颜色 */
      background: linear-gradient(to right, #ff00ff, #00f0ff, #00ff99);
      background-size: var(--bar-width) 100%;
      background-position: calc(var(--progress) - 100%) 0;
      border-radius: 50%;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
      z-index: 2;
    }

    /* 文本样式 */
    .progress-text {
      background-color: black;
      color: white;
      padding: 5px 10px;
      border-radius: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar">
      <div class="progress"></div>
      <div class="marker"></div>
    </div>
    <div class="progress-text">15%</div>
  </div>
</body>
</html>

原理说明 #

1. 定位精准度：标记点通过left: var(--progress)定位到进度位置，再用transform: translateX(-50%)实现水平居中，确保标记点正好落在进度的终点位置上方。
2. 色彩匹配：标记点使用与进度条完全一致的渐变背景，通过background-size设置为进度条宽度，再用background-position: calc(var(--progress) - 100%) 0将渐变偏移，使得标记点显示的区域正好对应进度条上该位置的颜色。
3. 可维护性：通过CSS变量--progress和--bar-width统一控制进度值和进度条宽度，修改时只需调整一处即可同步更新进度、标记点位置和色彩。

如果需要实现多个标记点，只需在.progress-bar内添加多个.marker元素，并为每个标记点设置独立的--progress变量即可。

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