Есть компонент прогрессБара. Данные для прогресса берутся с базы данных. Использования JS
- не желательно.
Задача стоит в том, чтобы сделать анимацию width
от 0 до текущего значения(прописан в атрибуте style).
Генерация keyframes
для каждого прогресса - не очень подходит. Думал также использовать класс с нулевыми значениями, а когда страница загрузила убирать его и сделать анимацию с использованием transition
. Сейчас остановился на идеи с max-width
. Анимация width: 0->100%, все работает, кроме скорости анимации. Точнее она у них одинаковая.
Собственно вопрос: Есть ли способ, сделать лучше? Всем спасибо!
.progress-bar{
width: 500px;
height: 2px;
background: #aaa;
margin: 10px 0;
}
.progress-bar .progress{
background: #f00;
width:100%;
height: 100%;
animation: width100 2s backwards;
}
@keyframes width100{
0% {
width: 0
}
100%{
width: 100%;
}
}
<div class='progress-bar'>
<div class='progress' style='max-width: 75%'></div>
</div>
<div class='progress-bar'>
<div class='progress' style='max-width: 50%'></div>
</div>
<div class='progress-bar'>
<div class='progress' style='max-width: 20%'></div>
</div>