Прогресс бар как на YouTube
Времена долгой загрузки страниц из интернета ушли в далекое прошлое, но запросы пользователей тоже возросли, и теперь смотреть фильмы и играть через интернет – наша повседневность. Но потребности растут и растут, а скорость вашего провайдера, не всегда за ними поспевает. Даже если у вас выделенная оптоволоконная линия, то и она не сможет решить всех проблем. Дело в том, что ряд задач требует большой нагрузки на сервер, а тот, в свою очередь, просто не может отдавать данные быстрее, скажем, когда мы пользуемся онлайн обработкой фото и видео. Чтобы сообщить пользователю, что на сайте все же что-то происходит – приходится использовать прогресс бар.
Если вы ищите интересное решение, то сегодня мы поговорим о плагине под названием 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.
Надеюсь, этот прогресс бар пригодится вам при разработке свои веб-приложений, а на этом у меня всё.