Ella Fitzgerald

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

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

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

function inArray(value, array) {
  if (!array)
    array = this;
  for (var i = 0; i < array.length; i++) {
    if (value === array[i]) {
      return true;
    } 
  }
  return false;
}
Array.prototype.inArray = inArray;
console.log([1, 10, 145, 8].inArray(10));
console.log(inArray(100, [1, 10, 145, 8]));

Сначала npm install сделайте

Насколько я понимаю, есть два вида ключей: deployment для доступа к определенному репозиторию и ключ всего аккаунта для доступа к любому хранилищу. deployment не могут повторяться. Так что либо делать каждый раз новый, либо использовать свой аккаунт-ключ.

К тому же, для push ключ должен иметь установленную галочку "Allow write access" (Can this key be used to push to this repository? Deploy keys always have pull access)

GitHub supports both Account Level public keys, and Project Level keys (aka Deploy Keys). Not allowing reuse of Account Level keys makes sense, but I claim that not allowing it for Deploy Keys doesn't. My one Account Level key allows access to all my projects, so why couldn't I have a Deploy Key that allows access to some of my projects?

Нажимаете Alt, затем «View» ► «Show menu»