https://github.com/levensta/progress-bar
A progress bar component for mobile web applications
https://github.com/levensta/progress-bar
component css-animations js-module progress-bar
Last synced: 7 months ago
JSON representation
A progress bar component for mobile web applications
- Host: GitHub
- URL: https://github.com/levensta/progress-bar
- Owner: levensta
- Created: 2022-03-11T13:26:22.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-11T14:22:24.000Z (about 4 years ago)
- Last Synced: 2025-03-01T11:45:57.963Z (about 1 year ago)
- Topics: component, css-animations, js-module, progress-bar
- Language: JavaScript
- Homepage: https://levensta.github.io/progress-bar/
- Size: 78.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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*, если видимый.
## Установка
1. Скачайте репозиторий и извлеките файлы из папки /src в свой проект
2. Вставьте в HTML:
```html
```
3. Импортируйте модуль в свой скрипт:
```JS
import Progress from "./src/Progress.js";
```
## Использование
В HTML необходимо создать элемент с id, в котором будет находиться компонент
и передать этот id при инициализации модуля:
```html
```
Инициализируйте модуль, как показано ниже и используйте методы [API](#API).
```JS
import Progress from "./src/Progress.js";
const progress1 = new Progress("progress1");
```