Progress bar not showing progress

Topic: Progress bar not showing progress

Declan Ward pro premium priority asked a year ago

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

enter image description here

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.

Add comment

Rafał Seifert answered a year ago

0 0 Best answer

Binding dynamic attributes to your angular html element should look like this:

<div class="progress" style="height: 20px">
  <div
    class="progress-bar"
    role="progressbar"
    [style.width.%]="timeRemaining"
    [attr.aria-valuenow]="timeRemaining"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    {{ timeRemaining }}
  </div>
</div>

In above example timeRemaining is a number property declared in the component class. You can update this property in your component class appropriately and it will update the style of the element.

Add comment

Declan Ward pro premium priority answered a year ago