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.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                            Реально это шаг назад.
                            Как хорошо получилось, что повсеместно во всем интернете не используется сугубо технический интерфейсный элемент «прогресс-бар», а теперь предлагают его возрождать.

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

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