Блок Progress

Работа выполнена в рамках тестового задания на стажировку в OZON.

Задача

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

Особенности

1. Блок должен иметь API для управления его состоянием.
2. Блок должен быть спроектирован так, чтобы его было легко переиспользовать в других приложениях.
3. Состояния:
   1. Normal – базовое состояние, в котором путём задания Value можно управлять размером дуги, отражающей некоторый параметр или прогресс процесс. Начало дуги соответствует 12 часам, конец дуги при увеличении параметра Value движется по направлению часовой стрелки и достигает начала при значении 100.
   2. Animated – независимое состояние, при котором блок или его элементы начинают вращаться с некоторым периодом по часовой стрелке.
   3. Hidden – состояние скрывающее блок со страницы.
4. Результат выполнения задачи должен быть представлен в виде небольшого приложения с элементами управления (Value – текстовый ввод числа от 0 до 100, Animate и Hide – логические переключатели on / off).
5. Приложение должно быть адаптирующимся под ориентацию экрана – будет большим плюсом.

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

1. Вставить разметку в верстку.

Разметка компонента должна выглядеть так:

<svg width="100" height="100" id="<id_компонента>">
    <circle cx="50"
            cy="50"
            r="45"
            id="progress-bg"/>

    <circle cx="50"
            cy="50"
            r="45"
            id="progress-percent"/>
</svg>

ID дочерних элементов могут быть любыми, но по умолчанию такие. Если указаны другие, то нужно их стилизовать в CSS вот так:

#progress-percent,
#progress-bg {
    fill: none;
}

#progress-bg {
    stroke: #EEF3F6;
}
#progress-percent {
    stroke: #005DFF;
}

2. Создать экземпляр компонента с помощью конструктора.

const progressSvg = document.getElementById("<id_компонента>")
const component = new Progress(progressSvg);

Описание параметров конструктора можно найти в документации

Дальше можно использовать методы класса, описание которых также есть в документации.

Попробовать API можно прямо в консоли браузера. Созданный объект компонента находится в

window.progressComponent

Немного описания почему были приняты некоторые решения

1. Запуск и остановка анимации через animation-play-state.

Так анимация получается плавной и при остановке анимации вращающийся элемент не возвращается в исходное положение.

2. Скрытие блока через visibility: hidden.

Чтобы после скрытия блока со страницы анимация не возвращалась в исходное положение