Progress Bar

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

Состояния

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

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

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

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

Вставьте в HTML:

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

Импортируйте модуль в свой скрипт:
```
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");