如何在conic-gradient环形进度条中添加白色空白段

你之前的conic-gradient计算逻辑有误，导致渐变段位置重叠或超出范围，进而让进度条无法显示。下面是修正后的代码，同时优化了变量管理和计算逻辑：

修正后的完整代码 #

CSS部分 #

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #00B4F4;
  --secondary: #00D0FF;
  --gap: 5%; /* 统一控制空白段宽度，方便后续调整 */
  --size: 200px;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    var(--primary) 0 calc(var(--percentage) * 1%),
    white calc(var(--percentage) * 1%) calc(var(--percentage) * 1% + var(--gap)),
    var(--secondary) calc(var(--percentage) * 1% + var(--gap)) calc(100% - var(--gap)),
    white calc(100% - var(--gap)) 100%
  );
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--secondary);
  font-weight: bold;
}

HTML部分 #

<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--value: 60"></div>

关键修正说明 #

• 新增--gap变量：统一管理空白段的宽度，后续要调整空白大小只需要修改这个变量即可
• 重新梳理渐变段逻辑：
  1. 主色段：从0到--percentage%
  2. 主色后空白：从--percentage%到--percentage% + --gap
  3. 次色段：从--percentage% + --gap到100% - --gap（预留最后一段空白的位置）
  4. 次色后空白：从100% - --gap到100%
• 简化calc写法：避免多层嵌套计算，减少出错概率，同时提升代码可读性

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