Показать Меню
falbar Простой прогресс бар

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

Простой прогресс бар

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

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

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

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

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

Пример на Desktop

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

Пример на Mobile

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

<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 функцию, что позволяет после определенного состояния прогресс бара совершить манипуляции с веб-страницей.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено