Вариантов реализации - очень много)
Я, например, думаю в сторону самого простого, самого надежного и самого кроссбраузерного варианта создания таких штук, а именно - разбиения исходных картинок на минимально возможные части с последующим впиливанием их в слои. Например так: фон (
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.
И конечно ни в коем случае не смотрите пример до тех пор, пока не реализуете сами, потеряете экспу))
