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

8 сентября 2015 Антон Кулешов 1104 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
Читайте далее

Эффект зеркального отражения

7 октября 2015 Антон Кулешов

Недавно я писал об 3D слайдере (ссылка ниже) и для его работы использовался маленький jQuery плагин reflection – этот скрипт позволяет добавить зеркальное отражение у картинки. Это довольно интересное решение, которое стоит добавить в копилку falbar. Полезность скрипта трудно переоценить: да, если вы прикрутили себе слайдер с пятью изображениями, то картинки можно подготовить и заранее в фотошопе, но если мы подгружаем новые картинки динамически или рандомной выборкой из, скажем, трех-четырех тысяч товаров нашего интернет магазина? Да, работа контент-менеджера встанет в копеечку, и скорее всего вы откажетесь от использования эффекта отражения в своем проекте.

«Дюжина» ховер эффектов в одном флаконе

21 февраля 2015 Антон Кулешов

Продолжаем развивать тему hover effects и обратим наше внимание на весьма интересный плагин на jQuery, при помощи которого можно реализовать кучу различных эффектов ховера.

Авто эффект печатания текста

31 марта 2016 Антон Кулешов

Несколько статей назад, я рассказывал: как написать на JavaScript простую имитацию набора текста на печатной машинке. Воспользовавшись данным эффектом можно, к примеру, выделить важные заголовки на странице. Но при написании скрипта не были учтены маленькие нюансы. В общем, сегодня мы рассмотрим jQuery плагин под название typed. Он будет хорошим инструментом в арсенале веб-разработчика, когда потребуется добавить на сайт эффект набора текста.