Как можно сделать круглый прогресс бар в индикаторе карусели?

Question

[Абра Кадабра]

Здравствуйте .
Хочу реализовать вот такое управление для слайдера, как это можно сделать ? Если есть какие-то реализации - пожалуйста подскажите .

Для меня единственным приятным вариантом показалась бутстраповская карусель, совместно с этим плагином. Но есть небольшая проблема. Как вы можете заметить, необходимо сделать 2 состояния: play/pause. А при нажатии на .active li в carousel-indicators, слайдер автоматически начинает cycle. Это так же касается элементов внутри li, какой бы з-индекс я не ставил . Клик обрабатывается на кнопку внутри li и сам li.

Любые варианты будут кстати! Ссылки на подобный материал - так же были бы кстати.

Answer 1

[Сергей Ганин]

только что думал над этим вопросом и сделал такое решение.
разделил 360 на 20 и получился прогресс бар с интервалом в 5%;
можно сделать меньше интервал увеличив максимальное 360 / число блоков.
без JS, только CSS3
jsfiddle.net/SergeyGuns/ttk8o0fa

Comments

[Абра Кадабра]

интересное решение, спасибо.

Answer 2

[Сергей Андреев]

можно через stroke в svg circle, и уже через js крутите параметры как вам нужно
Демо

Comments

[Абра Кадабра]

Подумал об этом в последнюю очередь, хотя стоило бы в первую. SVG вообще позволяет использовать магию во фронт-енде.