Progress Animation using JS

Question

I came through this kind of animation while working on Asana, I am trying to implement it in my Angular 6 project, but still don't have an idea, how can I proceed in implementing this kind of animation?

Initially, step is to fill the div with different colors as shown in gif. This is what I have tried till so far.

@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>

Currently this is how it looks for me.

This is what I want to achieve.

Please share a [minimal, concrete, and verifiable example](https://stackoverflow.com/help/minimal-reproducible-example) instead. What you've shared doesn't really give us a full picture of your implementation. — Terry, Jun 30 '19 at 21:23
@Terry I have updated the .html code for the same, and added the gif of how it looks for me right now, let me know what else do you think is needed to be added. — Divyanshu Rawat, Jun 30 '19 at 22:28
@Terry it's solved now, But still there are downvotes in the Question I don't know why? — Divyanshu Rawat, Jul 07 '19 at 15:41

score 1 · Answer 1 · answered Jul 07 '19 at 15:40

1

I myself solved the problem. Here is the sandbox for the same.

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

And here is how it looks.

answered Jul 07 '19 at 15:40

Divyanshu Rawat

4,421
2
37
53

Mohamed Abdallah · Answer 2 · 2019-07-01T02:00:57.883

-1

Make a normal progress bar and use a gif image as background-image, check this fiddle https://jsfiddle.net/u2wvxo5c/14/

edited Jul 01 '19 at 02:00

answered Jun 30 '19 at 21:15

Mohamed Abdallah

796
6
20

This is a kind if an hack, I am trying to implement the same using JS. – Divyanshu Rawat Jul 01 '19 at 07:13
1

You can use tool like this https://www.gradient-animator.com/ control the time and behavior with angular animations, But I suggest you to use a gif for performance, But if you want to change the color as the progress good luck with angular-animations it's better for this case. – Mohamed Abdallah Jul 02 '19 at 06:31
I solved it and added the solution as an answer here. – Divyanshu Rawat Jul 07 '19 at 15:40

Progress Animation using JS

2 Answers2