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

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

2014-05-13695018

Этот скрипт позволит установить на Вашем сайта прогресс бар, показывающий загрузку сайта в целом в виде полоски в верхней части. Впервые я увидел такую загрузку на 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.



Комментарии (18)
Максим Анатольевич 2014-05-15 в 02:05Спам
не работает. Или это из за того что у меня админ-бар отключен:?
-2
Марк 2014-05-16 в 22:03Спам
Не работает =\
-1
Денис Абдуллин 2014-05-17 в 12:00Спам
Действительно, одной вставкой кода не обойтись. Я добавил небольшой текст в материал, может поможет.
-3
Максим Анатольевич 2014-05-17 в 16:20Спам
НЕ РАБОТАЕТ!
-4
Serdey dutov 2014-08-17 в 10:19Спам
у меня не работает
0
BT 2014-08-22 в 22:42Спам
не хочу флюдить но может ли автор или кто-то кто разбирается объяснить как настроить и установить? (Буду очень благодарен)
1
Павел Гергерт 2014-08-27 в 12:45Спам
не робит вроде(
1
Artur Volk 2014-09-08 в 01:19Спам
Опечатка!
text/jaxascript замените на text/javascript
И еще скрипт почему то не работает на простых страницах и обратной форме. В каталоге файлов, статей и форуме работает.
1
Денис Абдуллин 2014-09-27 в 18:35
Исправил. Поэтому и жаловались наверное, что не работает.
1
Artur Volk 2014-09-08 в 01:20Спам
www.megaload.ucoz.com

А еще я путь к цсс и скрипту прописал полной ссылкой и теперь работает на каждой странице. Автору спасибо.
1
Динар Суфиянов 2015-02-22 в 09:32Спам
все работает спасибо огромное!!!!
1
Николаич 2015-03-24 в 14:53Спам
Поделись скриптом
-1
Николаич 2015-03-24 в 15:26Спам
Заработал без стандартной JQuery
0
Кирилл Катровский 2015-04-30 в 13:05Спам
А можно описать подробнее поправку в конце статьи? Буду очень признателен.
0
Mikhail Fedotov 2015-05-19 в 13:06Спам
ребят все четко работает спасибо вам)))
1
Deniss Lvov 2015-09-05 в 21:57Спам
Работает только на главной страничке, а как поменять цвет полоски?
0
Денис Абдуллин 2015-09-06 в 09:27
Наверное потому что нужно указать прямой путь к скрипту, перед ним достаточно / вставить. Ну как, в CSS ищите цвет, а точнее, замените #29d на свой.
0
Саги Кани 2016-02-11 в 08:40
Спасибо ;)
0
Чтобы оставить комментарий или отзыв под этой публикацией,
зарегистрируйтесь или войдите.