Делаем прогрессбар как в Убунту на СSS3 и jQuery
Сегодня мы будем делать прогрессбар как в операционной системе Ubuntu(конкретней в её стандартной графической оболочке GNOME). Как всегда я буду использовать свойства CSS3 и jQuery для анимации и управления состоянием прогрессбара. Сам прогрессбар конечно же не копия как в Убунту, но все же постарался сделать максимально похожим :)
И так начнем. В первую очередь нам нужен HTML макет элемента, вот какой он должен у нас быть:
<div class="progressbar" id="pb"> <div>100%</div> </div>
Класс главного дива описываем его визуальные свойства, идентификатор позволит нам манипулировать им в jQuery. Далеко не отходим и сразу же описываем CSS код прогрессбара:
div.progressbar
{
border: 1px solid #db7a15;
background-color: #efefef;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.progressbar div
{
background: url('bg.gif') 0px 0px repeat;
height: 20px;
text-align: center;
font-size: 11px; font-weight: bold; color: #fff; line-height: 20px;
text-shadow: 0px 0px 3px #000;
-o-text-shadow: 0px 0px 3px #000;
-moz-text-shadow: 0px 0px 3px #000;
-webkit-text-shadow: 0px 0px 3px #000;
border-radius: 2px;
-o-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
Так, с HTML и CSS мы решили, у нас теперь есть готовый прогрессбар, осталось создать для него анимированый фон и функцию манипуляции, смотрим js:
// когда сайт загружен
$(document.body).ready(function()
{
// вешаем событие
$('a').click(function()
{
// меняем состояние прогрессбара
$('#pb div').stop(true).animate({width: $(this).attr('class') + '%'},
{
// пошагово ищменяя текст состояния
step: function(now)
{
// записываем в текст
$(this).text(Math.round(now) + '%');
},
duration: 2000
});
});
// заставляем фоновую картинку анимировать
setInterval(function()
{
x = parseInt($('#pb div').css('background-position-x')) + 1;
$('#pb div').css('background-position-x', '' + x + 'px');
}, 35);
});
Готово! Манипуляция происходить при нажатии на ссылки в которых в классе указан процент нового состояния, если не совсем понятно смотрите в исходники, либо пример :)
Из недостатков: случаями непонятное поведение текста состояния при проценте меньше 3, а также Mozilla Firefox и Опера, уперто не хотят анимировать свойство background-position-x, из-за этого в них фон статический, а не динамический :)
// заставляем фоновую картинку анимировать
x = 0;
setInterval(function()
{
$(‘#pb div’).css(‘background-position’, (x++) + ‘px 0px’ );
}, 50);
Как-то так для того, чтобы везде заработало.
Изначально так и делал, только вместо переменной «x» подставлял текущее значение background-position-x. Вот только, что с переменной, что без неё, — не работает даже в хроме :)
На сколько помню background-position-x и background-position-y не работают в лисе и опере
Знаю :) Написал же в статье :) Как найду кроссбраузерное решение, — напишу :)
то решение что я предложел — кросс браузерное ;)
Я же говорю оно не работает даже в хроме :)
Прекрасно работает везде — подтверждаю, спасибо.
Отличный материал спасибо.
В какой редакторе такая клевая подсветка кода ? ;)
Это не редактор :) Это плагин подстветки кода для WP. Для редактора могу посоветовать подстветку кода Twilight, которую сам же и использую.
На опере и FF работает, если в JS писать так:
x = parseInt($('#pb div').css('background-position')) + 1; $('#pb div').css('background-position', '' + x + 'px 0px');Пожалуйста подскажите как сделать чтобы бегунок начинался с нуля, а по нажатию кнопки бежал до заданного количества процентов.
Поставить блоку внутри ширину в ноль.
<div class="progressbar" id="pb"> <div style="width:0%;">0%</div> </div>Спасибо за отличный прогресс-бар