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

Question

[Ella Fitzgerald]

Добрый вечер! Товарищи знатоки, хочу реализовать вот такой прогресс-бар на JS:



По завершению будет всплывать окно. Из исходников две картинки:



Использовала первую картинку, а потом тег лепила к ней абсолютным позиционированием тег progress. В общем, полная жуть получилась:



Помогите, пожалуйста! В каком направлении двигаться, чтобы получилось как на образце? Что использовать? А еще прогресс-бар должен нарастать с небольшими рывками (т.е. после каждого шага маленькая пауза). Заполняться должен в течение секунд 4-х.

В JS пока новичок, да и прогресс-бар пытаюсь сделать впервые : )

Comments

[Kovalsky]

Почему жуть, просто недоделки маленькие. Думаю, в самом просто варианте нужно три слоя:
1. Багровая подложка, повторяющаяся по горизонтали, например,
2. Собственно, fill. Лучше без тени, наверное,
3. Верхняя часть, с тенями,

То есть слой №1 в самом низу, слой №2 посередине, самый верхний - слой №3.

По поводу заполнения - для начала реализуйте абсолютно любой самый простой вариант заполнения, там проще будет представить как сделать это в нужном варианте.

[Ella Fitzgerald]

Вот часть кода, который я написала. Если, Вы считаете, что такой вариант, как на последнем скрине, не самый плохой, то как мне реализовать заполнение боковых треугольников?

[Kovalsky]

Елизавета Озерова: Где часть кода?)

Answer 1

[Kovalsky]

Вариантов реализации - очень много)

Я, например, думаю в сторону самого простого, самого надежного и самого кроссбраузерного варианта создания таких штук, а именно - разбиения исходных картинок на минимально возможные части с последующим впиливанием их в слои. Например так: фон (background) будет нижним слоем, полоска (fill) - посередине, и рамка (frame) будет верхним слоем. Для каждого из этих элементов берем такие части изображений из исходников, которых будет достаточно для того чтоб воспроизвести соответствующий элемент для любой ширины основного блока, то есть паттерны. Ну и хвосты еще (левые и правые части) для тех элементов, оформление которых не может быть выполнено паттернами.

Для background паттерн получился такой:

Если вы умеете пользоваться графическими редакторами, можно осветлить fill и всю тень сымитировать на изображениях для frame. Если нет, то придется еще вырезать хвосты, то есть левую и правую часть для fill. Мне помогли, у меня вроде бы вся тень успешно перенесена в frame, так что для fill я использую только паттерн:

С frame такое не прокатит, у нее есть левые и правые части, которые придется оформлять раздельно. Левая, паттерн и правая часть соответственно получились такие:

Осталось придумать как будет происходить анимация fill, то есть как раз анимация прогресс бара. Я решил, что самым простым вариантом будет просто анимировать ширину fill: 0% ширина будет соответствовать 0% прогресса, 100% ширина будет соответствовать 100% прогресса, все прозрачно)

Все это раскидываете по слоям, добиваетесь правильного отображения, пишете мелкий интерфейс взаимодействия с прогресс баром и все)

Собственно, пример (без интерфейса взаимодействия с прогресс баром).

Пример работает нормально начиная с IE8, IE7 начинает баловаться с box-sizing и все блоки разъезжаются. Можно искать решение, а можно забить, как я. Кстати, на IE8 пример запустить можно только открыв сохраненную его копию, т.к. в отличие от моего bloody-bar'а JSFiddle не поддерживает IE8 xD

В примере явно указана ширина для контейнера с баром только для того чтоб показать, что бар без проблем изменяет ширину.

Вот если честно, не представляю как парни предлагают анимировать бар через @keyframes 0_0 С баром же надо взаимодействовать, это сделает JS.

И конечно ни в коем случае не смотрите пример до тех пор, пока не реализуете сами, потеряете экспу))

Comments

[Ella Fitzgerald]

Вау, Никит, спасибо огромное за такой подробный разор решения.. это круто))

[Kovalsky]

Елизавета Озерова: тоже первый раз делал, было интересно

Answer 2

[daniilorain]

Увеличивайте ширину, используя анимацию, а для рывков transition-timing-function

Comments

[Ella Fitzgerald]

Я увеличила ширину, используя js, т.е. то, что на последней картинке, доходит до конца. Основной вопрос как сделать так, чтобы и треугольники по бокам заполнялись как на макете?

Answer 3

[Денис Букреев]

Все просто: надо градиент разместить между основой и вот этой вот окантовкой, тогда областью видимости градиента будет форма с треугольниками по бокам

Картинку градиента заменить на нормальный градиент
Тени сделать у верхнего слоя

ну и про рывки уже было сказано)