Полоска загрузки для сайта (плагин NProgress.js)

Полоска загрузки для сайта (плагин NProgress.js)

02017-05-301310518Денис Абдуллин

Этот скрипт позволит установить на Вашем сайта прогресс бар, показывающий загрузку сайта в целом в виде полоски в верхней части. Впервые я увидел такую загрузку на YouTube, но не будем гадать, где она появилась впервые. Подумайте, прежде чем установить скрипт, т.к. может оказаться, что это и будет лишней нагрузкой на сайт. Если на сайте нечего загружать, то такой плагин будет лишним, а если на сайте встроен видео-проигрыватель или просто тяжелые изображения, то следует поставить такой интересный и полезный плагин.

Ниже приведена инструкция как установить прогресс бар на свой сайт на uCoz.

Установка

Скачайте архив, загрузите папку nprogress через FTP.

В <head> Вашего сайта вставьте следующий код:

Код
<script src="nprogress/nprogress.js"></script>
<link rel="stylesheet" type="text/css" href="nprogress/nprogress.css" />
<script type="text/javascript">
  $('body').show();
  NProgress.start();
  setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
</script>

Теперь немного о настройке.

NProgress.start() — показывает Progress Bar

NProgress.set(0.4) — устанавливает значение в процентах (0.5 - 50%, 1 - 100% и далее)

NProgress.done() — завершает загрузку страницы

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

Упс! Тут писали, что скрипт не работает, так вот проверка на этом сайте показала, что скрипт работает нормально с версией JQuery 1.10.2. А сам скрипт NProgress.js должен загружаться после библиотеки, поэтому нужно вставить его в "Верхнюю часть сайта" после body. А запуск плагина вставьте в "Нижнюю часть сайта", перед /body.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (18)
Саги Кани 2016-02-11 в 08:40 / Материал
Спасибо ;)
0
Deniss Lvov 2015-09-05 в 21:57 / МатериалСпам
Работает только на главной страничке, а как поменять цвет полоски?
0
Денис Абдуллин 2015-09-06 в 09:27 / Материал
Наверное потому что нужно указать прямой путь к скрипту, перед ним достаточно / вставить. Ну как, в CSS ищите цвет, а точнее, замените #29d на свой.
0
Кирилл Катровский 2015-04-30 в 13:05 / МатериалСпам
А можно описать подробнее поправку в конце статьи? Буду очень признателен.
0
Николаич 2015-03-24 в 15:26 / МатериалСпам
Заработал без стандартной JQuery
0
Николаич 2015-03-24 в 14:53 / МатериалСпам
Поделись скриптом
-1
Динар Суфиянов 2015-02-22 в 09:32 / МатериалСпам
все работает спасибо огромное!!!!
1
Mikhail Fedotov 2015-05-19 в 13:06 / МатериалСпам
ребят все четко работает спасибо вам)))
1
Денис Абдуллин 2014-09-27 в 18:35 / Материал
Исправил. Поэтому и жаловались наверное, что не работает.
1
Павел Гергерт 2014-08-27 в 12:45 / МатериалСпам
не робит вроде(
0
Serdey dutov 2014-08-17 в 10:19 / МатериалСпам
у меня не работает
0
Максим Анатольевич 2014-05-17 в 16:20 / МатериалСпам
НЕ РАБОТАЕТ!
-4
Марк 2014-05-16 в 22:03 / МатериалСпам
Не работает =\
-1
Денис Абдуллин 2014-05-17 в 12:00 / МатериалСпам
Действительно, одной вставкой кода не обойтись. Я добавил небольшой текст в материал, может поможет.
-3
Максим Анатольевич 2014-05-15 в 02:05 / МатериалСпам
не работает. Или это из за того что у меня админ-бар отключен:?
-2
BT 2014-08-22 в 22:42 / МатериалСпам
не хочу флюдить но может ли автор или кто-то кто разбирается объяснить как настроить и установить? (Буду очень благодарен)
1
Artur Volk 2014-09-08 в 01:20 / МатериалСпам
www.megaload.ucoz.com

А еще я путь к цсс и скрипту прописал полной ссылкой и теперь работает на каждой странице. Автору спасибо.
1
Artur Volk 2014-09-08 в 01:19 / МатериалСпам
Опечатка!
text/jaxascript замените на text/javascript
И еще скрипт почему то не работает на простых страницах и обратной форме. В каталоге файлов, статей и форуме работает.
1
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.