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

8 сентября 2015 Антон Кулешов 1109 0

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

Реклама

Если вы ищите интересное решение, то сегодня мы поговорим о плагине под названием 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.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Плавное увеличение картинок при наведении курсора

27 ноября 2014 Антон Кулешов

Если вы хотите сделать свою галерею динамичной и интересной, то предлагаю воспользоваться плагином hoverpulse, который служит для плавного увеличения картинки. При помощи этого маленького решения ваши пользователи смогут более детально рассмотреть увеличенные изображения, просто наводя курсор на них.

Решаем проблемы с добавлением RSS ленты в Google Chrome

29 декабря 2014 Антон Кулешов

Вчера ночью я решил улучшить свой самописец, а именно: добавить RSS ленту. Благо, уже в Яндекс-метрике можно увидеть, что сайт начинает потихоньку подниматься вверх в поисковой выдаче и, в результате чего, появляются новые посетители.

Перенаправление пользователя при помощи HTML

24 ноября 2014 Антон Кулешов

Если вам потребуется перенаправить пользователя на другую страницу или просто перезагрузить её, то наиболее простым способом будет воспользоваться мета тегом refresh.