Простой прогресс бар загрузки страницы

8 января 2016 Антон Кулешов 1334 0

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

Реклама

Ранее я уже рассматривал похожий прогресс бар - nprogress, но toProgress обладает рядом свои преимуществ, которые и делают его хорошим инструментом в копилке веб-разработчика.

Приятные моменты этого прогресс бара:

  • Очень маленький размер притом, что у него есть неплохой набор методов;
  • Написан на JavaScript, всю необходимую разметку и стили добавляет сам;
  • Адаптивность – точно также хорошо работает и на мобильных экранах;
  • Нет лишнего функционала, легко дописываемое решение.

Пример работы на desktop:

primer-na-desktop-toprogress

Пример работы на mobile устройстве:

primer-na-mobile-toprogress

Давайте перейдем к подключению скрипта и его настройке:

<script src="toProgress.min.js" type="text/javascript"></script>

Собственно настройка и создание экземпляра объекта toProgress:

var options = {
	id: "top-progress-bar",
	color: "#f44336",
	height: "2px",
	duration: 0.2
};

var progressBar = new ToProgress(options);

В объекте options может быть всего 4 параметра:

  • id – id элемента прогресс бара;
  • color – цвет линии прогресс бара;
  • height – высота линии;
  • duration – продолжительность и плавность анимации.

После того как мы сохранили экземпляр объекта в переменную progressBar, мы можем начать пользоваться API плагина:

  • increase() – подгрузка до определённого прогресса;
  • decrease() – откат до определённого прогресса;
  • setProgress() – установка подрузки конкретного значения;
  • reset() – сброс работы плагина;
  • finish() – метод завершения прогресса;
  • getProgress() – получить состояние прогресса;
  • show() – показывает линю прогресса, если она спрятана;
  • hide() – отвечает за возможность спрятать линию прогресса.

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

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

Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript

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

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

SMTP сервер для отправки писем с сайта если функция mail не работает

9 апреля 2016 Антон Кулешов

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

10 июня 2015 Антон Кулешов

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