Как сделать такой прогресс бар?

Question

[GeKskill]

Что использовать, чтобы сделать такой прогресс бар, чтобы заполнение полосы и позиция человека менялась в зависимости от подставляемого ( при отрисовке подтягиваем из базы) значения? Интересует именно кривая полоса и привязка к ней объекта (человечка), фоновые элементы будут с паралаксом.

Answer 1

[Vitaliy Orlov]

Сделай у картинки прозрачность там где белый путь, потом под неё поставь желтый прямоугольник и двигай его вправо с помощью css



Человека просто выравняй по правому краю желтого прямоугольника

Comments

[GeKskill]

Супер, это то, что надо! А чтобы блок двигать, это надо писать скрипт, который будет сам style.css переписывать, или как-то иначе?

[Vitaliy Orlov]

Обновил JSFiddle, смотри Javascript код. Нужно будет немного доработать уже под твою задачу, но идея думаю понятна - меняешь на нужную позицию через javascript (если страница перезагружается, то можно и прямо в css дописывать сдвиг на нужное кол-во процентов)

[GeKskill]

С заполнением уловил, а вот для человека статичное выравнивание не очень подходит, нужно как-то определитm ему путь, но это ладно, поищу. Спасибо большое, задача намного упростилась)

[Сергей delphinpro]

GeKskill, Ниже намекнули на правильный путь — SVG.
И заполнять полоску проще и движение человека по кривой сделать раз плюнуть.

[GeKskill]

Сергей delphinpro, Да, спасибо. Уже читаю про SVG.

Answer 2

[geektimer]

Возможно, то же самое будет проще реализовать с помощью svg, предварительно отрисовав дорожку нужной формы вместе с точками и разложив все по слоям. Затем, так же анимировать svg-элемент (заливка) в нижнем слое, у которого будет меняться ширина.