Angular 2 simple animation

Question

I'm currently trying to make an simple loader animation that basically increases an element based on a given percentage.

Now i saw that Angular 2 has an animation module and worked around a little bit and this basically only works for static animations.

I've got a loader component that's running an simple interval

var interval = setInterval(function(){
        this.count++;
        this.loading();

        this.circleSize = window.innerWidth / 100 * this.count;

        if(this.count >= 100) {
            clearInterval(interval);
        }

    }.bind(this), 25);

Googling a little further i found angular 2 supports css by variable: [style.width]="circleSize" however this doesn't seem to get updated with the interval.

Now i could a library like GSAP to achieve this but what do you guys recon would be the best/angular approach to do so?

Answer 1

In your component script you can run an interval using:

  constructor: function() {
    this.barwidth = 10;
    setInterval(this.updateCounter.bind(this), 1000);
  },
  updateCounter: function(){
    this.barwidth+=10;
  }

In your template you can change the bar width with:

`<h2>{{ barwidth }} </h2><div class="bar" [style.width]="barwidth">dd</div>`

If you use a transition in your CSS you will see the width of the bar animate:

.bar {
  transition: width 0.5s;
  background-color:green;
  overflow:hidden;
}

For simple animations I would recommend just sticking with CSS!