为自定义硬币滑块部分填充圆圈

Question

我想设计一个自定义硬币滑块，在经过特定硬币所代表的某个范围的图像时，硬币的“填充”因子应该在0到1之间变化。说当范围是10个图像时，我在第3张图片中，它应该看起来像（已填充的硬币代表已经遍历的先前范围，而朝向末尾的空白代表尚未触及的范围。左边的第6个圆圈在这里是感兴趣的）：< / p>

如何生成此类圆圈图像？有一些CSS技巧可用吗？或者也许使用HTML5画布？

Answer 1

如果你想尽可能地用css，你可能想尝试设置一堆10个div。 如果将border-radius设置为50％，则会获得圆圈。 然后你将所有这些都设置为选择颜色的边框

如果您将前6个圆圈设置为特定类，并将背景颜色与其关联，则表示您已填充圆圈。