Как сделать CSS Simple ProgressBar со значками (просто посмотрите, чтобы показать)?

Мне нужно показать индикатор выполнения, как на этом рисунке;

ИЗОБРАЖЕНИЕ: http://i12.photobucket.com/albums/a244/yanyzx01/bar_zpscrqvn78g.jpg

(статические значки из 15 шестиугольников)

Не требуется изменять цветную область при кликах или выбрасывать время, достаточно просто увидеть определенный статический прогресс.

Мне потребовалось использовать значок «шестиугольник» из https://materialdesignicons.com/ следующим образом:

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

Я думал попробовать фон, который с атрибутом witdh:x% определяет цветную зону. Например: 45%. Один я видел это в примере со звездами, но я нашел его снова :'c


icons html css progress-bar ratingbar
person Jonathan    schedule 25.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Самый простой способ сделать это — использовать изображение в формате 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 в зависимости от текущего процесса.

person grmmph    schedule 25.11.2015