渲染多色分段进度条

Question

分段进度条如下：

我正在开发一个反应中的分段进度条，它将动态渲染多达15个像药丸一样的svgs，就像图片中显示的那样。 我遇到的问题是，在使用默认的“空”颜色渲染剩余的药丸形状时，使用适当颜色填充段的算法最多可达到完成的百分比。 任何方向或帮助将不胜感激。

Answer 1

伪代码中可能的逻辑：

for i = 0 to 14
    ratio = i / 14
    if CurrentValue >= ratio 
       drawPill(i-th position, AppropriateColor[i])  
    else
       drawPill(i-th position, DefaultGrayColor)