Progress Bar

Progress – классовый компонент для использования в мобильных web-приложениях. Блок отображает прогресс выполнения процессов.

Состояния

Компонент имеет три состояния:

• Normal – состояние по умолчанию. В текущем состоянии можно управлять размером дуги, отображающей прогресс. В поле Value можно указать число в процентах от 0 до 100. Изменяется методом setValue(percent).
• Animated – независимое состояние, при котором блок или его элементы начинают вращаться с некоторым периодом по часовой стрелке. Изменяется методами animateOn() и animateOff(). В текущем состоянии нельзя задать значение Value.
• Hidden – состояние, скрывающее блок со страницы. Изменяется методами hideOn() и hideOff(). При активном состоянии игнорируется значение Value и Animated.

API

Методы для работы с компонентом:

• getValue() – возвращает текущее значение в процентах.
• setValue(percent) – устанавливает процентное числовое значение, переданное аргументом percent.
• animateOn() – включает анимацию дуги.
• animateOff() – выключает анимацию дуги.
• isAnimated() – возвращает true, если анимация включена или false, если выключена.
• hideOn() – активирует состояние скрытие блока прогресса.
• hideOff() – выключает состояние скрытие блока прогресса, блок снова становится видимым.
• isHidden() – возвращает true, если блок скрыт или false, если видимый.

Установка

1. Скачайте репозиторий и извлеките файлы из папки /src в свой проект
2. Вставьте в HTML:

   <link rel="stylesheet" href="src/Progress.css">
   <script type="module" src="src/Progress.js"></script>

3. Импортируйте модуль в свой скрипт:

   import Progress from "./src/Progress.js";

Использование

В HTML необходимо создать элемент с id, в котором будет находиться компонент и передать этот id при инициализации модуля:

<div id="progress1"></div>

Инициализируйте модуль, как показано ниже и используйте методы API.

import Progress from "./src/Progress.js";

const progress1 = new Progress("progress1");