** Task**

I am using a countdown timer to display remaining time for a process. The timer starts at the max time allowed decrementing each second to zero. The progress bar, background colour grey, starts off a colour (yellow) full width and should start to slide to the left exposing the gray background, eventually exposing the full gray background at zero time remaining

In this image, 95 seconds remain which means the progress bar should be almost full. The size of the yellow bar is dictated by style="width:xx%" How do I update this?

Expected behavior

I should see visible progress.

Actual behavior

No visible progress.

Also: cannot bind to valuenow

Resources (screenshots, code snippets etc.)

As per documentation:

class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"

However, if I try binding to valuenow, I get an error.

aria-valuenow="{{valueNow}}"

Can't bind to 'aria-valuenow' since it isn't a known property of 'div'.

This removes the error but doesn't seem to do anything:

attr.aria-valuenow="{{valueNow}}"

In the documentation the width of the progressing bar seems to be controlled by

style="width:70%"

but I cannot bind to this.