Как сделасть плавный прогресс бар который загружается ровно 1 мин?

331b02e65d2345788cc5b4c11be86b22.png Такая задача, нужно сделать прогресс бар который плавно бежит ровно минуту и потом исчезает.
  • Вопрос задан
  • 1303 просмотра
Решения вопроса 1
CSS анимацией
@keyframes progress{
from{
width: 0;
}
to{
width: 100%;
}
}
.progressbar:after{
content: '';
position: absolute;
height: 100%;
animation: progress 60s linear forwards;
}


Убрать его можно второй анимацей на самом элементе
@keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.progressbar{
animation: hide 100ms 60s ease-in-out;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы