Elizaveta_Ozerova
@Elizaveta_Ozerova

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

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

76a135f915aa420cae730b21b1ff8a77.jpg

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

46930c0b0cfd42a4822317a7ba2a927b.png10cdb4dc6839457d9d21554ec7164a3f.png

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

8a37dc702b6c42e7bfc5d4b441fe7b02.jpg

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

В JS пока новичок, да и прогресс-бар пытаюсь сделать впервые : )
  • Вопрос задан
  • 978 просмотров
Решения вопроса 1
lazalu68
@lazalu68
Salmon
Вариантов реализации - очень много)

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

Для background паттерн получился такой:
1
Если вы умеете пользоваться графическими редакторами, можно осветлить fill и всю тень сымитировать на изображениях для frame. Если нет, то придется еще вырезать хвосты, то есть левую и правую часть для fill. Мне помогли, у меня вроде бы вся тень успешно перенесена в frame, так что для fill я использую только паттерн:
2-2
С frame такое не прокатит, у нее есть левые и правые части, которые придется оформлять раздельно. Левая, паттерн и правая часть соответственно получились такие:
3-13-23-3
Осталось придумать как будет происходить анимация fill, то есть как раз анимация прогресс бара. Я решил, что самым простым вариантом будет просто анимировать ширину fill: 0% ширина будет соответствовать 0% прогресса, 100% ширина будет соответствовать 100% прогресса, все прозрачно)

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

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

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

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

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

И конечно ни в коем случае не смотрите пример до тех пор, пока не реализуете сами, потеряете экспу))
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@daniilorain
Увеличивайте ширину, используя анимацию, а для рывков transition-timing-function
Ответ написан
Все просто: надо градиент разместить между основой и вот этой вот окантовкой, тогда областью видимости градиента будет форма с треугольниками по бокам

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

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

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

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