Прогрессбар загрузки как в GMail Программирование

Давно искали реализацию прогрессбара загрузки как в знаменитом интерфейсе почты GMail? Не вопрос! С плагином «NProgress» это сделать проще простого!

jQuery плагин «NProgress» представляет собой миниатюрный прогрессбар для Ajax приложений, на подобии как в продуктах Google, YouTube и Medium.

Подключение плагина происходит следующим кодом, где к странице подгружаются непосредственно сама библиотека плагина [nprogress.js] и файл стилей [nprogress.css]:

<script type=’text/javascript’ src=’nprogress.js’></script>
<link rel=’stylesheet’ href=’nprogress.css’/>

В принципе, в большинстве случаев для успешной работы прогрессбара, необходимы всего лишь два метода `start()` и `done()`. как Вы успели догадаться, первый стартует анимацию прогрессбара, второй же её останавливает (завершает).

Реализовать это возможно следующим кодом, который осуществляет POST-запрос и в случае его успеха (т.е. получения успешного ответа сервера) заканчивает анимацию прогрессбара:

NProgress.start();

$.ajax({
    type: «POST»,
    dataType : ‘json’,
    data: «»
}).success(function(response) {
    if(response.success == 200) {
        NProgress.done();
    };
});

Интересной идеей будет реализация через `$(document).ready` и`$(window).load`, это позволит визуально показать пользователю, что страница Вашего сайта уже загрузилась.

Вы также можете управлять «прогрессом» загрузки, например устанавливать значения от 0 до 1 на том или ином этапе работы Ваших основных скриптов. Следующий код демонстрирует прогресс загрузки веб-страницы в зависимости от степени доступности того или иного DOM-элемента:

    $(‘.header’).load(NProgress.set(0.0)); // Тоже самое, что и `.start()`
    $(‘.content’).load(NProgress.set(0.4));
    $(‘.footer’).load(NProgress.set(0.6));
    $(document).ready(NProgress.set(1.0)); // Тоже самое, что и `.done()`

Кроме того, в плагине предусмотрено увеличение процента «загрузки» прогрессбара по-шагово. Например, следующий код увеличит текущий момент загрузки на 0,2 десятых:


    …
    NProgress.inc(0.2);
    …

Примечательно то, что в случае увеличения шага «загрузки» больше 1.0 (означало бы полную загрузку), фактически, анимация остановится на позиции 0,94, что создаст эффект «зависания» загрузки и плагин по прежнему будет ожидать вызов события `done()` означающего полное завершение загрузки.

Нами были описаны далеко не все методы и настройки плагина, подробнее читайте на сайте разработчика.

Свяжитесь с нами если у Вас возникли вопросы
или позвоните:
+38 (050) 471-21-14
Vodafone, Украина
+38 (093) 962-16-62
Lifecell, Украина