Slide in from left animation in Angular2

Question

I am trying to build a progress bar component where the bar slides in from the left.

I have a solution where the width of the bar is fixed to 40%, however my component takes an input which is the desired percentage.

animations: [
    trigger('slide', [ 
        state('in', style({ width: '40%'})),
        transition('* => *', animate('1000ms ease-in'))
    ])
]

Is it possible to do something as above with a property containing the width? Or is there another or better way to do this?

Answer 1

set width to 40vw,it would determine your window width to calc the width.