Разработан прототип блока Progress.

Особенности :

• Блок имеет API для управления его состоянием
• Для легкого переиспользования и интеграции использованы модули JS

Состояния:

• Normal- при задании Value происходит управление размером дуги с некоторой анимацией. Для того, чтобы легко управлять ее скоростью и не искать, где она записана, константа «SPEEDNORMAL»(скорость) вынесена в отдельный файл «constants.js». При каждом введении Value дуга начинает свое начало от 0. Для того, чтобы дуга начинала свое движение от предыдущего состояния, тогда стоит вынести переменную «startPersent=0» из функции «normal» в файле по пути: «stateProgress/progressNormal». Если ввести Value>100 автоматически выставляется 100.
• Animated-при нажатии на чекбокс Animate начинается вращение блока. Однако, этого вращения не видно при задании Value=0 или =100, так как макет не предусматривает этого.
• Hidden-при нажатии на чекбокс Hide скрывается блок Progress от пользователя.

• Приложение адаптируется под ориентацию

Ссылка на gitHub Pages: https://lobanovavaleria.github.io/TestProgressBlock/

Краткий экскурс по файлам

• index.html, progressStyle.css, main.js
• stateProgress - папка с 3 файлами - функциями для изменения состояния блока Progress

• progressAnimated.js - файл, отвечающий за состояние Animated
• progressHidden.js - файл с функцией «setHidden», отвечающей за состояние Hidden
• progressNormal.js - файл с функциями, отвечающие за состояние Normal

• constants.js - файл для констант
• elementsForChange.js - в этом файле находятся элементы блока, к которым будут применяться методы, находящиеся в папке stateProgress.
• elementsOfControls.js - здесь лежат элементы управления блоком, на которые вешается прослушиватель событий в файле main.js.