Прогресс Анимация с использованием JS

Question

Я прошел через этот вид анимации во время работы над Asana, я пытаюсь реализовать ее в своем проекте Angular 6, но все еще не знаю, как я могу приступить к реализации такого рода анимации?

Первоначально, шаг должен заполнить div разными цветами, как показано на рисунке.Это то, что я пробовал до сих пор.

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: [''],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(700, style({ opacity: 1, background: ' linear-gradient(to bottom left, rgb(123, 98, 221), rgb(37, 77, 180))' }))
      ]),
      transition(':leave', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})


  <div class="" [@fadeInOut] *ngIf = 'showFeedback'>
    <p>Create</p>
  </div>

В настоящее время это выглядит так для меня.

Этоэто то, чего я хочу достичь.

Answer 1

Я сам решил проблему. Вот песочница для того же.

https://codesandbox.io/s/angular-c4kth

А вот как это выглядит.

Answer 2

Сделайте нормальный индикатор выполнения и используйте изображение gif как background-image, отметьте эту скрипку https://jsfiddle.net/u2wvxo5c/14/