ProgressBlock – Web-компонент для отображения прогресса

Интерактивный UI-блок, отображающий процесс выполнения задач в виде SVG-дуги. Разработан с упором на переиспользуемость, кроссбраузерность и адаптивность, без использования фреймворков и внешних библиотек.

---

Пример работы

Готовый результат можно посмотреть по ссылке: https://daryavorontsova.github.io/ProgressBlock

---

Функциональность

Поддерживает три состояния:

• Normal — отображение прогресса от 0 до 100, дуга растёт по часовой стрелке начиная с 12:00
• Animated — блок начинает непрерывно вращаться по часовой стрелке
• Hidden — блок скрывается со страницы

API-интерфейс для управления:

• setValue(number) — установить значение прогресса
• startAnimation() / stopAnimation() — запустить или остановить анимацию вращения
• show() / hide() — показать или скрыть компонент

---

Интерфейс пользователя

Мини-приложение содержит:

• Поле ввода значения от 0 до 100
• Переключатель Animate (вкл/выкл анимацию)
• Переключатель Hide (показать/скрыть блок)

---

Адаптивность и кроссбраузерность

Приложение полностью адаптивно и кроссбраузерно: поддерживается ориентация и на мобильных, и на десктопах Применён файл reset.scss для нормализации стилей между браузерами

Структура проекта

├── js/
│ ├── main.js # Инициализация компонента и обработчики событий
│ └── progress-block.js # Класс ProgressBlock и его API
├── styles/
│ ├── \_reset.scss # Сброс и нормализация стилей (кроссбраузерность)
│ ├── \_variables.scss # Переменные цветов, размеров и т.п.
│ └── progress.scss # Основные стили компонента
├── index.html # Интерфейс управления блоком

---

Качество и автоматизация

1. Используются линтеры:

• ESLint — проверка качества JS-кода
• Stylelint — проверка SCSS
• Prettier — автоформатирование

2. Включён автоматизированный CI/CD пайплайн через GitHub Actions, который:

• Проверяет код на соответствие линтерам
• Сборку выполняет с помощью SCSS-компиляции
• Автоматически деплоит проект на GitHub Pages после каждого коммита в main