Показать Меню
falbar Плагин NProgress

Прогресс бар как на YouTube

Плагин NProgress

Времена долгой загрузки страниц из интернета ушли в далекое прошлое, но запросы пользователей тоже возросли, и теперь смотреть фильмы и играть через интернет – наша повседневность. Но потребности растут и растут, а скорость вашего провайдера, не всегда за ними поспевает. Даже если у Вас выделенная оптоволоконная линия, то и она не сможет решить всех проблем. Дело в том, что ряд задач требует большой нагрузки на сервер, а тот, в свою очередь, просто не может отдавать данные быстрее, скажем, когда мы пользуемся онлайн обработкой фото и видео. Чтобы сообщить пользователю, что на сайте все же что-то происходит – приходится использовать прогресс бар.

Если Вы ищите интересное решение, то сегодня мы поговорим о плагине под названием NProgress. Главным его отличием от других подобных скриптов – это возможность создать прогресс бар в стиле YouTube.

Это решение обладает множеством настроек, но, при этом, довольно гибкое и легкое в установке. Им я сам часто пользуюсь в различных проектах. К слову: в первой редакции Фалбра, когда я использовал History API для перехода по страницам.

Итак, для работы с NProgress нам необходимо подключить сопутствующие скрипты:

<link href="nprogress.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="nprogress.js" type="text/javascript"></script>

Для начала отображения процесса загрузки нужно вызвать метод start():

NProgress.start();

А для завершения - метод done():

NProgress.done();

Но не все страницы настолько долго грузиться, чтобы использовать просто эти методы, для того, чтобы придать плановость и красоту данному элементу, то при завершении загрузки можно добавить метод done() в таймер:

setTimeout(function(){
	NProgress.done();
}, 1000);

Как это работает, Вы сможете увидеть на странице демо, там же попробовать другие методы:

  • set() – данный метод устанавливает стартовую длину прогресса;
  • inc() – насколько будет изменяться прогресс.

Если необходимы особые настройки скрипта, то стоит воспользоваться методом configure() куда передать параметры:

  • template – html шаблон progressbara;
  • speed – скорость изменения прогресса;
  • parent – элемент к которому будет применён плагин;
  • barSelector – селектор бара;
  • spinnerSelector – селектор loadera;
  • showSpinner – включение/выключение loadera.

Надеюсь, этот прогресс бар пригодится Вам при разработке свои веб-приложений, а на этом у меня всё.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено