Как сверстать такой progress bar?

Question

[Vlad Chepel]

Как сверстать такой progress bar?

Так, что бы на каждом шаге прибавлялось по белом блоку

Answer 1

[Ainur Shakirov]

Как я вижу:

1) svg'шка, у каждого блока свой id, и далее просто с помощью js скрываем/показываем нужные блоки.

2) Берем 1 блок в png, располагаем 10 его клонов по кругу и так же через js меняем прозрачность.

Answer 2

[Ankhena]

Нарисовать весь круг с белыми штуками в фоне или svg, как удобнее. Сверху наложить круг цвета фона с помощью svg stroke. На js увеличивать на нужное значение.

Этот пример не решение, он от другой задачи, но станет понятно о чем я
https://jsfiddle.net/Ankhena/zs10gtyr/

Answer 3

[Wki]

jQuery .Лист, при активации и-тый елемент - тру , при (елемент=тру) запуск (Fade in) или добавить для елементу клас (тут уж как сам захочеш)

Answer 4

[profesor08]

Сделай 10 блоков с картинкой и расставь их при помощи transform: translate rotate, не забудь задать им transform-origin: 50% 50%; position: absolute; а контейнеру position: relative; width: 0; height: 0;
Тем самым сможешь пихать куда угодно, а блоки будут отдаляться от центра на одинаковое расстояние.

jsfiddle.net/7fs804dc/10