Хороший… Плохой… Главное — у кого ружьё!
6,4
рейтинг
21 августа 2013 в 11:40

Разработка → NProgress: прогресс-бар как на YouTube и Medium

Многие заметили, что на YouTube и на Medium появился небольшой новый элемент UI — прогресс-бар в виде тонкой цветной полоски в самом верху страницы, который примостился прямо под панелью браузера.
image
Внимание к новому элементу привлек недавний популярный пост New UI Pattern: Website Loading Bars на UsabilityPost. Как выяснилось, причина использования прогресс-бара в том, что вместо загрузки новой страницы содержимое подгружается через JavaScript, и поэтому собственный индикатор браузера о загрузке страницы может не срабатывать. Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложили на плечи маленького UI-приема.

Теперь у всех желающих появилась возможность быстро сделать на своем сайте точно такой же прогресс-бар благодаря плагину NProgress.js [Демо][GitHub].

Для работы плагина потребуется подключить jQuery, nprogress.js и nprogress.css. Использовать его не сложнее — достаточно просто вызвать start() и done() — первое, что приходит на ум, это привязать их к вызовам Ajax — событиям ajaxStart и ajaxComplete:

NProgress.start(); // начать "загрузку"
NProgress.done(); // заставить индикатор дойти до конца и пропасть

Есть и продвинутые возможности:

NProgress.set(0.3); // установка конкретного процента
NProgress.inc(); // увеличение прогресса на случайный процент
NProgress.configure({ ease: 'ease', speed: 500 }); // конфигурация скорости загрузки и CSS easing
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 

P.S. А есть еще и версия для тех, кто предпочитает AngularJS.
Владимир Маслов @HotWaterMusic
карма
165,7
рейтинг 6,4
Хороший… Плохой… Главное — у кого ружьё!
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (18)

  • +2
    странная тенденция. В iOS 7 теперь стандартный прогресс-бар выглядит примерно так же.
  • +2
    В новом мобильном сафари из иос7 (не знаю как в новой макоси) такая полоска уже есть по умолчанию и на демо это выглядит достаточно странно, а если ещё они будут разных цветов, то вообще не понять что будет. К тому же есть некоторые скины к фаерфоксу, которые так же добавлют похожий прогрессбар.
    В итоге я бы такую штуку не юзал, хоть она и смотрится весьма мило.
    • +1
      Разве в новом сафари или в плагинах к Файеру эта полоска появляется и при XHR запросах? Это плагин для веб приложений — когда вы сами подгружаете контент, вряд ли при этом будут конфликтовать два прогресс бара. Да, в итоге у всех будут бары разных цветов, но лично я не вижу в этом что-то плохого, в конце концов цветовая схема у сайтов разная.
      • 0
        Не туда комент вставил :(
  • +7
    А меня этот прогресс-бар по началу раздражал. Вечно при обновлении / загрузки страницы начинала бежать эта полоса и я все время отвлекался от содержимого и переводил взгляд в верхнюю часть монитора.
  • +3
    Так вот что это за полосочка! А я всё гадал, прогресс чего она отображает…
  • +1
    У нас во встроенном в софт браузере (ограниченном доступом строго к определённому URI и без адресной строки в принципе) подобная полоска используется уже около года :) Забавно, что это стало тенденцией.
  • 0
    А как меняется URL, но при этом не перезагружается страница?
    Только через знак #?
    • 0
      Хотя вообще, не вижу в таком приёме ничего хорошего. Весит много не шапка, а контент, а картинки и скрипты кешируются.
      • 0
        Дело ведь не только в весе контента/страницы. Тут много факторов, тот же рендеринг, инициализация скриптов и т. п. Представляете, если бы при загрузке нового текстового документа весь офисный пакет стартовал бы заново, а при переходе на другую веб-страницу заново стартовал бы весь браузер.

        Внутри самих веб-страниц всё так же — если пользователь запросил какие-либо дополнительные данные, то зачем же загружать всю страницу заново с этими дополнительными данными, когда можно загружать и отрендерить только эти новые данные.
        • 0
          Для веб-приложений наподобие текстовых редакторов это очень полезно, но просто для сайтов из страниц — детское украшательство.
    • +7
      HTML5 history API
    • +15
      Добро пожаловать в мир Single Page Applications.
  • 0
    В браузере по умолчанию для Дебиана — Epiphany — уже достаточно давно такой прогресс бар для любых страниц.
  • +2
    Что то типа

    $('a.clickMe').click(function() {
    	NProgress.start(); // начать "загрузку"
    	$.ajax({
    		url: "/get/some/stuff/",
    	}).error(function(){
    		NProgress.done(); // заставить индикатор дойти до конца и пропасть
    	}).done(function() {
    		NProgress.done(); // заставить индикатор дойти до конца и пропасть
    	});
    });
    


    Правильно?

    Не пойму только, в какой момент вставлять NProgress.set(0.3) или NProgress.inc() — это если серия связанных запросов делается?
    • 0
      Скорее всего, я еще попробовал поэкспериментировать с событием progress которое присутствует в XHR2, правда у меня все время выдавало 1, интересно будет ли оно работать для нефайловых запросов, в спеках вроде сказано что должно файритсья если есть content-length.
    • +1
      Что-то типа такого:
      $.ajax({
          type: 'GET',
          dataType: 'json',
          url: URL,
          cache: false,
          error: function (xhr, ajaxOptions, thrownError) {
              alert(xhr.responseText);
              alert(thrownError);
          },
          xhr: function () {
              var xhr = new window.XMLHttpRequest();
              //Download progress
              xhr.addEventListener("progress", function (evt) {
                  if (evt.lengthComputable) {
                      var percentComplete = evt.loaded / evt.total;
                      NProgress.set(Math.round(percentComplete));
                  }
              }, false);
              return xhr;
          },
          beforeSend: function () {
              NProgress.start();
          },
          success: function (json) {
              NProgress.done();
          }
      });
      


      Но при этом URL должен быть локальный и сервер должен отведать на каждую страницу Content-Length, тогда все будет работать.
  • 0
    Реально это шаг назад.
    Как хорошо получилось, что повсеместно во всем интернете не используется сугубо технический интерфейсный элемент «прогресс-бар», а теперь предлагают его возрождать.

    За несколько лет пользования Хромом (у которого никаких прогресс-баров нет, кроме процесс загрузки файлов), ни разу мне не захотелось узнать, на сколько же процентов у меня загружена какая-то страница.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.