Реклама
timeweb
falbar

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

8 января 2016 1611 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