Создавая веб-приложение, не важно, какого уровня: будет ли это обычный веб-сайт или сервис, который принимает массу параметров и обрабатывает их на сервере – хорошей практикой является добавление прогресс бара (progress bar), за анимацией которого можно спрятать все времязатратные части нашего приложения.
Ранее я уже рассматривал похожий прогресс бар - nprogress, но toProgress обладает рядом свои преимуществ, которые и делают его хорошим инструментом в копилке веб-разработчика.
Приятные моменты этого прогресс бара:
- Очень маленький размер притом, что у него есть неплохой набор методов;
- Написан на JavaScript, всю необходимую разметку и стили добавляет сам;
- Адаптивность – точно также хорошо работает и на мобильных экранах;
- Нет лишнего функционала, легко дописываемое решение.
Пример работы на desktop:
Пример работы на 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 функцию, что позволяет после определенного состояния прогресс бара совершить манипуляции с веб-страницей.