带状态间隙的Horizontal Progress Bar实现方法咨询

下面是基于HTML和CSS的实现方案，能满足你需要的「仅在部分进度时显示完成/未完成区间的透明间隙，0或满进度时间隙隐藏」的需求：

核心实现思路 #

用容器包裹两个独立元素，分别对应「已完成进度段」和「未完成进度段」，通过CSS变量控制进度值，并利用条件判断动态显示/隐藏两段之间的间隙。

代码示例 #

HTML结构

<!-- 进度60%的示例 -->
<div class="progress-bar" style="--progress: 60;">
  <div class="progress-filled"></div>
  <div class="progress-empty"></div>
</div>

<!-- 进度0%的示例 -->
<div class="progress-bar" style="--progress: 0;">
  <div class="progress-filled"></div>
  <div class="progress-empty"></div>
</div>

<!-- 进度100%的示例 -->
<div class="progress-bar" style="--progress: 100;">
  <div class="progress-filled"></div>
  <div class="progress-empty"></div>
</div>

CSS样式

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  position: relative;
  margin: 10px 0;
}

.progress-filled, .progress-empty {
  height: 100%;
  position: absolute;
  top: 0;
}

/* 已完成进度段 */
.progress-filled {
  left: 0;
  width: calc(var(--progress) * 1%);
  background-color: #2563eb;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 仅在进度非0非100时显示右侧间隙 */
  margin-right: calc((var(--progress) > 0 && var(--progress) < 100) ? 8px : 0);
}

/* 未完成进度段 */
.progress-empty {
  right: 0;
  width: calc((100 - var(--progress)) * 1%);
  background-color: #e5e7eb;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* 对应已完成段的间隙，保持整体对齐 */
  margin-left: calc((var(--progress) > 0 && var(--progress) < 100) ? 8px : 0);
}

关键细节说明 #

• 通过CSS变量--progress直接控制进度值，取值范围为0-100
• 间隙大小由margin-right和margin-left的8px控制，可根据需求调整
• 利用CSS的逻辑判断(var(--progress) > 0 && var(--progress) < 100)，自动在进度为0或100%时隐藏间隙
• 间隙为透明状态，实际是两段元素之间的间距，透出容器的背景色

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