仅用CSS实现按进度值切换颜色的圆形增长进度条

不需要额外编写JavaScript，利用CSS容器样式查询直接匹配元素上--value自定义属性的数值区间，覆盖对应颜色变量即可，完全满足「仅按最终进度值匹配颜色、动画过程不切换」的需求。

完整修改后代码 #

CSS部分 #

@keyframes growProgressBar {
  0%,
  33% {
    --pgPercentage: 0;
  }
  100% {
    --pgPercentage: var(--value);
  }
}
@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
div[role="progressbar"] {
  container-type: inline-size;
  --size: 12rem;
  /* 默认兜底颜色 对应80~100区间 */
  --fg: green;
  --bg: lightgreen;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}
div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

/* 按进度值区间匹配颜色 低区间规则前置，高区间自动覆盖边界值 */
/* 0~20区间 */
@container style(--value <= 20) {
  div[role="progressbar"] {
    --fg: red;
    --bg: pink;
  }
}
/* 20~40区间 */
@container style(--value > 20) and style(--value <= 40) {
  div[role="progressbar"] {
    --fg: orange;
    --bg: peachpuff;
  }
}
/* 40~60区间 */
@container style(--value > 40) and style(--value <= 60) {
  div[role="progressbar"] {
    --fg: yellow;
    --bg: lightyellow;
  }
}
/* 60~80区间 */
@container style(--value > 60) and style(--value <= 80) {
  div[role="progressbar"] {
    --fg: royalblue;
    --bg: lightblue;
  }
}

HTML使用示例 #

直接在元素style属性中设置--value为对应进度值即可自动匹配颜色，不需要额外添加类名：

<!-- 90%进度 自动匹配绿色系 -->
<div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value:90"></div>
<!-- 15%进度 自动匹配红色系 -->
<div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="--value:15"></div>
<!-- 55%进度 自动匹配黄色系 -->
<div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="--value:55"></div>
<!-- 72%进度 自动匹配蓝色系 -->
<div role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--value:72"></div>
<!-- 30%进度 自动匹配橙色系 -->
<div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="--value:30"></div>

实现说明 #

• 颜色匹配在页面初始化、进度条动画开始播放前就已完成，动画全程颜色保持固定，不会随着进度增长动态切换
• 边界值（20/40/60/80）会自动匹配对应更高区间的颜色，符合常规进度条交互逻辑
• 仅新增了容器查询声明和区间颜色匹配规则，原有进度条的动画效果、样式、百分比数字展示逻辑完全保留

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