Прогресс-бар загрузки страницы как в Яндекс Браузере при помощи jQuery и CSS3 — Уникальные скрипты и готовые решения для сайта

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

Для начала посмотрите ДЕМО

Установка:

1#: На нужных страницах вашего сайта между <head> и </head> вставьте:

<link rel="stylesheet" type="text/css" href="/css/nprogress.css" />

1	<link rel="stylesheet" type="text/css" href="/css/nprogress.css" />

2#: На этих же страницах между <body> и </body> вставьте:

<script src="/js/nprogress.js"></script>
<script>
NProgress.start();
$('body').show(); 
$(window).load(function() {			 
setTimeout(function() {
NProgress.done(); $('.fade').removeClass('out');
}, 1000);
});
</script>

NProgress.start();

$('body').show();

$(window).load(function() {

setTimeout(function() {

NProgress.done(); $('.fade').removeClass('out');

}, 1000);

});

</script>

Осталось лишь залить CSS файл из прикреплённого архива в папку css и JS файл в папку js

Источник материала: http://zornet.ru

Возможно, Вам будет интересно:

Стильный эффект при наведении на картинки при помощи CSS3

Эффект дыма на фоне при помощи SVG и CSS3

Создание черновиков при добавлении материала как на…

Анимированный индикатор загрузки на CSS3 и SVG

Анимированная вакханалия на фоне при помощи HTML5

Анимированные разноцветные пятна при помощи SVG

Прогресс-бар загрузки страницы как в Яндекс Браузере при помощи jQuery и CSS3: 2 комментария

Прогресс-бар загрузки страницы как в Яндекс Браузере при помощи jQuery и CSS3: 2 комментария

Добавить комментарий Отменить ответ