1

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

2 ответа 2

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>

8
  • Не плохой вариант. А можно ли передать переменную с style в анимацию keyframes ( локально), чтобы для каждого элемента свое значение?
    – Node_pro
    Commented 4 дек. 2020 в 12:39
  • @Node_pro так и работает, сейчас поставлю для первого прогрeсс-бара 10 секунд Commented 4 дек. 2020 в 12:40
  • Уточню вопрос, если не задержку ставить, а передавать max-width?
    – Node_pro
    Commented 4 дек. 2020 в 12:41
  • @Node_pro вы хотите что-то типа: 100% анимировать за 1 секунду, 50% за 0.5, 25% За 0.25? Commented 4 дек. 2020 в 12:42
  • @Node_pro я не понимаю какая задержка, вроде тут время анимации Commented 4 дек. 2020 в 12:43
0

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

Вот (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>

1
  • Можно конечно if- прогнать и добавить класс (slow|medium|fast), но надеялся, что есть способ, который анимацию запускает от 0 до текущих. Иногда такой эффект можно увидеть, когда css файл подгружается с задержкой + transition
    – Node_pro
    Commented 4 дек. 2020 в 12:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.