CODEWITHSUNDEEP
twitter-bootstrap
Dominik Zynis
Dominik Zynis

Reputation: 11

Why is BootStrap 4 Progress Bar Not Animating

I'm looking at the documenation on http://v4-alpha.getbootstrap.com/components/progress/

It does not work there, and it does not work on the site I am building.

Has anyone else encountered this or is this a bug?

Upvotes: 1

Views: 2810

Answers (2)

technologist
technologist

Reputation: 61

[animated]='true' enabled the progress bar animation. Inspecting the progress bar you can see progress-bar-animated css class with below css code

animation: 1s linear infinite progress-bar-stripes;

You can simply add the above line and check.

Ex. progress bar sample

<p><ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar></p>

Inspecting this you will get 

<div aria-valuemin="0" role="progressbar" class="progress-bar bg-warning progress-bar-animated progress-bar-striped" aria-valuenow="75" aria-valuemax="100" style="width: 75%;"><!----><i _ngcontent-c2="">50%</i></div>

The latest documents available with below link : https://ng-bootstrap.github.io/#/components/progressbar/examples

Upvotes: 2

Josh
Josh

Reputation: 5721

Looks like this is an open issue: https://github.com/twbs/bootstrap/issues/17148

As a workaround, someone has suggested animating it manually like so:

$("#progressbar")
  .animate({
    "width": data["percent"]+"%"
  }, {
    duration: 600,
    easing: 'linear'
  });

Upvotes: 1

Related Questions