我需要显示一个像这张图这样的进度条;
图片:http://i12.photobucket.com/albums/a244/yanyzx01/bar_zpscrqvn78g.jpg
(静态 15 个六边形图标)
不需要更改点击时的彩色区域或抛出时间,只需查看定义的静态进度。
我需要使用 https://materialdesignicons.com/ 中的图标“六边形”这样:
<i class="mdi mdi-hexagon"></i>
我正在考虑尝试使用属性 witdh: x% 定义彩色区域的背景。例如:45%。 我在星星示例中看到了这个,但我确实再次找到了它:'c
最佳答案
最简单的方法是使用黑色背景和透明六边形的 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
的宽度。
关于html - 如何使用图标制作 CSS 简单进度条(仅查看以显示)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33927345/