Реализация блока Progress для тестового задания.

Ссылка на деплой: https://rawline.github.io/progress/

Блок реализован с помощью svg графики. Для переиспользования блока необходимо создать экземпляр класса Progress и передать в конструктор svg элемент. В классе Progoress так же указаны константы, которые отвечают за правильное отображение прогресса

Настройка параметров реализована блгодоря методам:

Методы	Тип аргумента	Описание
setValue()	int	Выполняет заполнение прогресса на передоваемое значение. Передоваемое значение должно быть >= 0 && <= 100
startAnimation()	-	Запускает анимацию вращения прогресса по часовой стрелке
stopAnimation()	-	Останавливает анимацию вращения прогресса по часовой стрелке. Положение принимает исходное состояние
hide()	-	Скрывает блок с экрана
show()	-	Показывает блок вновь

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

1. Импортируйте класс Progress

import Progress from './Progress.js';

2. Создайте экземпляр класса Progress. В конструктор необходимо передать svg элемент на странице

const progressElement = document.getElementById('progress');
const progress = new Progress(progressElement);

3. Получить доступ к состояниям можно получить с помощью следующих методов

progress.setValue(50); // заполнение на половину
progress.startAnimation(); // запуск анимации
progress.stopAnimation(); // остановка анимации
progress.hide(); // убрать блок со страницы
progress.show(); // показать блок снова