Как анимировать прогрессбар?

Question

Есть компонент прогрессБара. Данные для прогресса берутся с базы данных. Использования 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>

Answer 1

Надо задать разную скорость анимации же.

Вот (max-width у всех сделал одинаковым для наглядности):

.progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  background: #f00;
  width: 100%;
  height: 100%;
}

.progress-bar .progress.fast   {animation: width100 1s backwards;}
.progress-bar .progress.medium {animation: width100 4s backwards;}
.progress-bar .progress.slow   {animation: width100 10s backwards;}

@keyframes width100 {
  0% {
    width: 0
  }
  100% {
    width: 100%;
  }
}

<div class='progress-bar'>
  <div class='progress fast' style='max-width: 75%'></div>
</div>

<div class='progress-bar'>
  <div class='progress medium' style='max-width: 75%'></div>
</div>

<div class='progress-bar'>
  <div class='progress slow' style='max-width: 75%'></div>
</div>

Answer 2

Используйте css переменные и можете не менять анимации (вы можете менять css переменные для элементов даже через js)
Я также решил анимировать не width, а transform, который предназначен для анимаций

.progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  --time: 1s; /** Значение по умолчанию для времени анимации **/
  background: #f00;
  width: 100%;
  height: 100%;
  transform-origin: left top;
  transform: scaleX(0);
  animation: scale var(--time) forwards;
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

<div class='progress-bar'>
  <div class='progress' style='max-width: 75%; --time: 10s'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 50%; --time: 2s'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 20%; --time: 1s'></div>
</div>

С цветом:
CSS переменные делают магию, они умеют наследоваться по правилам СSS

.progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  --time: 1s; /** Значение по умолчанию для времени анимации **/
  background-color: #f00;
  --colorBar: #f00; /** Значение по умолчанию для конечного цвета **/
  width: 100%; 
  height: 100%;
  transform-origin: left top;
  transform: scaleX(0);
  animation: scale var(--time) forwards;
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    background-color: var(--colorBar);
    transform: scaleX(1);
  }
}

<div class='progress-bar'>
  <div class='progress' style='max-width: 75%; --time: 3s; --colorBar: black;'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 50%; --time: 2s; --colorBar: yellow;'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 20%; --time: 1s;'></div>
</div>

БЛОГ НА HUSL

Как анимировать прогрессбар?

Ответы (2 шт):