Прогресс-бар с помощью css и javascript

Сегодня мы научимся делать круглый progressbar на js, используя только css и картинку как фоновое изображение.

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

Механизм действует так - с равными интервалами времени мы перемещаем нашу фоновую картинку на определенное расстояние таким образом, что пользователь видит только "шаги". При быстром перемещении прогресс-бар будет красиво вращаться.

Непонятно? Читай дальше.

Выглядеть будет все это дело так:

В моей картинке, 16 шагов для совершения 1 оборота. Важно, чтобы "шаги" были абсолютно одинаковыми по пропорциям и размерам, иначе вращения не получится. Сама картинка выглядит вот так:

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

Итак, создадим разметку html:

<div id="progress_51"></div>

Это 1 элемент. Для него надо прописать соответствующие стили:

#progress_51 {background:url(progress_51.png) repeat-x 0 0; width:51px; height:51px;}

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

$(document).ready(function() {
 
var element = $('#progress_51');
var im = 0
setInterval (
	function () {
		element.css({'background-position':im +'px 0'})
		im -= 51;
	}, 70 // скорость вращения
)
}
);

Тут все просто и понятно, думаю, в особых комментариях он не требуется. Задаем элемент, задаем значение на которое смещать фоновую картинку (im -= 51;) - здесь 51 пиксель, потому что элемент имеет размеры 51x51. И скорость смещения, выражаемся в мс. Вот и все. Наш прогресс-бар крутится! Посмотреть можно в примере. Для примера я сделал 2 прогресс-бара: 51x51 и 30x30 пикселей.