0

I added a simple b-progress-bar to my code in order to show some percentages. I followed the official documentation step by step, and everything is showing nicely, except for the animation part. Here is the component html:

      <b-progress max="100" :animated="true" :striped="true" show-progress>
        <b-progress-bar :value="balance"  variant="danger"
                        :label-html="(balance/100) * 100 + '%'" />
      </b-progress>

When the component displays, it doesn't move, stripes are there alongside everything else, but the animation is missing. Another thing I noted is that even the progress bar in the documentation isn't being animated for me. Could it be a browser problem?

Thanks in advance.

ForWiz
  • 145
  • 1
  • 1
  • 10
  • You've probably enabled `prefers-reduced-motion` in your OS or Browser, which disables most animations in Bootstrap. – Hiws Aug 19 '21 at 07:12
  • @Hiws I just checked, `prefers-reduced-motion` is disabled in my browser. – ForWiz Aug 19 '21 at 11:20
  • And what about your OS? I believe most OS have an option which reduces animations as well, and your browser likely respects that if its enabled. https://stackoverflow.com/a/59708982/8397974 – Hiws Aug 19 '21 at 11:27
  • You're right, it was OS-related. Thank you so much! – ForWiz Aug 19 '21 at 11:53

1 Answers1

0

If anyone stumbles upon such a dumb issue, please check your Windows/Browser settings to see whether you have disabled animations.

I personally disabled animation on my whole PC to speed it up, and that was blocking the from doing anything visual.

ForWiz
  • 145
  • 1
  • 1
  • 10