Javascript 构建一个进度表，该进度表将步骤与一个进度表对齐

我正在创建一个进度表，它有4个步骤：

25%、50%、75%和100%完成。

目标是将完成百分比传递给组件，然后让组件渲染进度表，其中条形图的宽度表示完成百分比，并根据完成百分比是否匹配25、50、75和100%阈值激活步骤气泡

以上是我最终希望看到的，如果我们将约80%传递给组件。。目前这是75%的渲染，这是不需要的。应该是：

这是我目前的代码：

.container{
位置：相对位置；
宽度：288px；
填充：12px0；
保证金：0自动；
框大小：边框框；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
}
.货柜：在{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：12px；
背景：#e6e7；
利润上限：-6px；
边界半径：50px；
}
.货柜：之后{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：4px；
背景：蓝色；
页边顶部：-2px；
宽度：75%；
边界半径：50px；
过渡：宽度。2秒；
}
.步骤{
位置：相对位置；
宽度：24px；
高度：24px；
框大小：边框框；
}
.步骤：在{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：24px；
高度：24px；
边界半径：50%；
背景:#ececec ;；
}
.p25：之后，
.p50:之后，
.p75：之后{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：24px；
高度：24px；
背景：蓝色；
边界半径：50%；
}

既然你从25%开始，而不是从零开始，你需要从
-25%
开始，然后再加上。您还需要考虑台阶的宽度

width: calc(-25% + xx% + (24px * yy));


xx
是所需的百分比
yy
是阶跃偏移量


.container{
位置：相对位置；
宽度：288px；
填充：12px0；
保证金：0自动；
框大小：边框框；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
}
.货柜：在{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：12px；
背景：#e6e7；
利润上限：-6px；
边界半径：50px；
}
.货柜：之后{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：4px；
背景：蓝色；
页边顶部：-2px；
宽度：计算（-25%+50%+（24px*1））；
边界半径：50px；
过渡：宽度。2秒；
框大小：边框框；
}
.步骤{
位置：相对位置；
宽度：24px；
高度：24px；
框大小：边框框；
}
.步骤：在{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：24px；
高度：24px；
边界半径：50%；
背景:#ececec ;；
}
.p25：之后，
.p50:之后，
.p75：之后{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：24px；
高度：24px；
背景：蓝色；
边界半径：50%；
}
您可以尝试这种方法，您可以在JS中控制轨迹的宽度值


.track{
位置：绝对位置；
顶部：21px；
高度：4px；
背景颜色：蓝色；
}
.集装箱{
位置：相对位置；
宽度：288px；
填充：12px0；
保证金：0自动；
框大小：边框框；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
}
.货柜：在{
内容：“；
位置：绝对位置；
最高：50%；
左：0；
右：0；
高度：12px；
背景：#e6e7；
利润上限：-6px；
边界半径：50px；
}
.步骤{
位置：相对位置；
宽度：24px；
高度：24px；
框大小：边框框；
}
.步骤：在{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：24px；
高度：24px；
边界半径：50%；
背景:#ececec ;；
}
p:之后{
内容：“；
位置：绝对位置；
排名：0；
右：0；
宽度：24px；
高度：24px；
背景：蓝色；
边界半径：50%；
}
下面是另一个代码更少的想法：


.container{
位置：相对位置；
利润率：20px；
宽度：288px；
高度：50px；
--i:100%；
--p:calc（var（--i）-56px）；
背景：
/*四圈*/
径向梯度（中心圆，#E6E7 50%，透明53%）100%0/40px 100%，
径向梯度（中心圆圈，蓝色50%，透明53%）计算（2*100%/3）0/40px 100%，
径向梯度（中心圆圈，蓝色50%，透明53%）计算（100%/3）0/40px 100%，
径向梯度（中心圆圈，蓝色50%，透明53%）0 0/40px 100%，
/*进度条*/
线性梯度（蓝色，蓝色）20px 50%/var（--p）20%无重复，
/*底线*/
线性梯度（#e6e7，#e6e7）中心/计算（100%-20px）30%无重复；
背景重复：无重复；
}

喜欢这个方向。。。yy是什么？yy是阶跃偏移（也称为你的圆）0=第一个圆；1=第二圈等。。不过，我想不出一种方法可以在纯css中自动计算出这个值。但是你会想用它的百分比和一个模块来计算它。如果你的25%以上，它将是
（24px*1）
超过50%将是
（24px*2）
，超过75%将是
（24px*3）
对不起，我的偏移量错了，25%将是
（24px*0）
超过50%将是
（24px*1）
和75%以上的人将是
（24px*2）
100%的人将是
（24px*3）
。非常感谢。