html - 如何使用图标制作 CSS 简单进度条(仅查看以显示)？

Question

我需要显示一个像这张图这样的进度条；

图片:http://i12.photobucket.com/albums/a244/yanyzx01/bar_zpscrqvn78g.jpg

(静态 15 个六边形图标)

不需要更改点击时的彩色区域或抛出时间，只需查看定义的静态进度。

我需要使用 https://materialdesignicons.com/ 中的图标“六边形”这样:

<i class="mdi mdi-hexagon"></i>

我正在考虑尝试使用属性 witdh: x% 定义彩色区域的背景。例如:45%。我在星星示例中看到了这个，但我确实再次找到了它:'c

Answer 1

最简单的方法是使用黑色背景和透明六边形的 png 图像。

<div class="wrapper" style="position:relative">
  <div id="bar" style="background: red; position:absolute; width: 0%"></div>
  <div id="image" style="background:url('path/to/img')"></div>
</div>

然后在 javascript 上根据正在进行的进程增加 #bar 的宽度。