Если вы ищите интересное решение, то сегодня мы поговорим о плагине под названием nprogress. Главным его отличием от других подобных скриптов – это возможность создать прогресс бар в стиле YouTube.
Это решение обладает множеством настроек, но, при этом, довольно гибкое и легкое в установке. Им я сам часто пользуюсь в различных проектах. К слову: в первой редакции falbar, когда я использовал 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.
Надеюсь, этот прогресс бар пригодится вам при разработке свои веб-приложений, а на этом у меня всё.
