CSS или SVG анимация. Как правильно реализовать идею?

Question

[Andrey Dontsov]

Привет
Гуру, подскажите с какой стороны подойти к реализации такой штуки?
Идея в поэтапной загрузке по контрольным точкам
Изначально на 5-ти этапной шкале только цифры
Когда доходим скроллом до этого блока появляется текст первого этапа и цифра 1 меняется на check
Полоса загрузки двигается к этапу 2, появляется текст этапа 2, цифра 2 меняется на check
Белая полоса загрузки двигается дальше к п.3 ...и так далее все этапы

Вроде бы все просто, но опыта не достаточно, боюсь нагородить
Появление текста, думаю, animate.css подойдет
А анимация загрузки, смена цифры на чек и переход к следующему этапу, тут прошу помощи
Как это сделать правильно, как опытный верстальщик подошел бы к этой задаче?
Буду благодарен любой помощи, ткнуть носом в документацию, может плагин какой, или просто совет.. что угодно
Спасибо

Answer 1

[Andrey Dontsov]

Короче кому интересно решение - если не достаточно опыта написать такое с нуля самому, как вариант можно отрисовать в Adobe Edge Animate.
Всем спасибо

Answer 2

[Дима Паутов]

Если не умеете работать с SVG, то фон можно вырезать картинкой.
А сами шаги сделать так:
thecodeplayer.com/walkthrough/jquery-multi-step-fo...

Comments

[Дима Паутов]

AndreyBLG: А что собственно вам нужно то? Кнут?

Answer 3

[Nikolay Talanov]

Если бы вам нужно было как то обводку кругов динамично закрашивать, то тогда стоило бы юзать svg. А тут вообще можно сделать с помощью обычный круглых блоков, белых дивов для линий и их анимирования с помощью scaleX/width (в сочетании с overflow:hidden для кругов например).

Answer 4

[hime2]

Без разницы в данном случаи.
css/svg + js