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, если видимый.
- Скачайте репозиторий и извлеките файлы из папки /src в свой проект
- Вставьте в 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");