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

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

13.05.2014679518

Этот скрипт позволит установить на Вашем сайта прогресс бар, показывающий загрузку сайта в целом в виде полоски в верхней части. Впервые я увидел такую загрузку на 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)
не работает. Или это из за того что у меня админ-бар отключен:?
-2
Марк 16.05.2014 в 22:03Спам
Не работает =\
-1
Действительно, одной вставкой кода не обойтись. Я добавил небольшой текст в материал, может поможет.
-3
НЕ РАБОТАЕТ!
-4
Serdey dutov 17.08.2014 в 10:19Спам
у меня не работает
0
BT 22.08.2014 в 22:42Спам
не хочу флюдить но может ли автор или кто-то кто разбирается объяснить как настроить и установить? (Буду очень благодарен)
1
не робит вроде(
1
Artur Volk 08.09.2014 в 01:19Спам
Опечатка!
text/jaxascript замените на text/javascript
И еще скрипт почему то не работает на простых страницах и обратной форме. В каталоге файлов, статей и форуме работает.
1
Денис Абдуллин 27.09.2014 в 18:35
Исправил. Поэтому и жаловались наверное, что не работает.
1
Artur Volk 08.09.2014 в 01:20Спам
www.megaload.ucoz.com

А еще я путь к цсс и скрипту прописал полной ссылкой и теперь работает на каждой странице. Автору спасибо.
1
все работает спасибо огромное!!!!
1
Николаич 24.03.2015 в 14:53Спам
Поделись скриптом
-1
Николаич 24.03.2015 в 15:26Спам
Заработал без стандартной JQuery
0
А можно описать подробнее поправку в конце статьи? Буду очень признателен.
0
Mikhail Fedotov 19.05.2015 в 13:06Спам
ребят все четко работает спасибо вам)))
1
Deniss Lvov 05.09.2015 в 21:57Спам
Работает только на главной страничке, а как поменять цвет полоски?
0
Денис Абдуллин 06.09.2015 в 09:27
Наверное потому что нужно указать прямой путь к скрипту, перед ним достаточно / вставить. Ну как, в CSS ищите цвет, а точнее, замените #29d на свой.
0
Саги Кани 11.02.2016 в 08:40
Спасибо ;)
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт