我需要创建一个使用css/html的进度条. 我已经有了一个圆锥渐变版本，可以很好地使用两种 colored颜色 ，但我想在--百分比部分之后添加一小部分白色，在--次要 colored颜色 部分之后添加另一个白色部分.
以下是我的代码:
[role="progressbar"] {
--percentage: var(--value);
--primary: #00B4F4;
--secondary: #00D0FF;
--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) calc(var(--percentage) * 1%), var(--secondary));
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;
}<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--value: 60"></div>我试着把白色部分设置成这样:
background: conic-gradient(
var(--primary) 0 calc(var(--percentage) * 1%),
white calc(var(--percentage) * 1%) calc(calc(var(--percentage) + 5) * 1%),
var(--secondary) calc(calc(var(--percentage) + 5) * 1%) calc(calc(100% - var(--percentage) - 5% - 5%) * 1%),
white calc(calc(100% - var(--percentage) - 5% - 5%) * 1%) 100%
);
但之后什么都没有显示出来.