@VladChepel

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

Как сверстать такой progress bar?
5b30d1894f586024115286.png
Так, что бы на каждом шаге прибавлялось по белом блоку
  • Вопрос задан
  • 289 просмотров
Решения вопроса 2
Fqyeh29
@Fqyeh29
↓ ИМХО ↓
Как я вижу:

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

2) Берем 1 блок в png, располагаем 10 его клонов по кругу и так же через js меняем прозрачность.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Нарисовать весь круг с белыми штуками в фоне или svg, как удобнее. Сверху наложить круг цвета фона с помощью svg stroke. На js увеличивать на нужное значение.

Этот пример не решение, он от другой задачи, но станет понятно о чем я
https://jsfiddle.net/Ankhena/zs10gtyr/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Wki
jQuery .Лист, при активации и-тый елемент - тру , при (елемент=тру) запуск (Fade in) или добавить для елементу клас (тут уж как сам захочеш)
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
Сделай 10 блоков с картинкой и расставь их при помощи transform: translate rotate, не забудь задать им transform-origin: 50% 50%; position: absolute; а контейнеру position: relative; width: 0; height: 0;
Тем самым сможешь пихать куда угодно, а блоки будут отдаляться от центра на одинаковое расстояние.

jsfiddle.net/7fs804dc/10
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы