Прогресс-бар
Условие
Полоса прогресса. Требования: · .progress - дорожка высотой 8px, светлый фон, скруглённые края, содержимое не выходит за края; · .progress__fill - заполнение, ширина берётся из переменной --value (проценты), цвет синий; · переход ширины плавный, 200мс.
Что проверяют тесты
высота дорожки
скругление и обрезка
ширина заполнения из переменной
заполнение на всю высоту
плавный переход ширины
Как подойти
Задача с собеседования в X5. Три вещи, которые проверяют: знание CSS-переменных как способа прокинуть данные в стили, понимание, что скругление у родителя не обрезает ребёнка без overflow, и указание конкретного свойства в transition вместо all. Доступная версия добавляет role="progressbar" с aria-valuenow - назвать это стоит.
Подсказки: 3
- Ширину заполнения бери прямо из переменной: width: var(--value).
- overflow: hidden на дорожке обрезает заполнение по скруглению.
- Переход указывается на том свойстве, которое меняется.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.