animation

It’s been a while since I added the responsive parameter to the plugin, but from what I remember, the responsive progress bar loses the animation. This is because the animation is based on the width of the bar. Normally the bar has a hard-coded width, so you tell it “i want a progress bar that’s 57% of that width” and it’s pretty simple to figure that out mathematically. With the responsive bar, the width is dynamic — it’s whatever the width of the container it’s in is. And that container can change size, too. So there’d need to be a lot more complicated javascript magic going on to calculate the width based on the current container and, currently, the animation isn’t even using javascript for most of that, it’s just using CSS transitions.

That was probably more info than you needed to know.
TL;DR — it’s more complicated than it’s worth. ??

Actually, I managed to get it working at 100% width without using the short code. I code the following HTML and uses the style class for animation:

<div style="display: block; width:100%">
  <div class="wppb-wrapper inside" style="width:100%">
    <div class="inside">55 %</div>
    <div class="wppb-progress fixed" style="width:100%">
      <span class="green" style="width: 55%;"><span></span></span>
    </div>
  </div>
  <div class="wppb-wrapper inside" style="width:100%">
    <div class="inside">45 %</div>
    <div class="wppb-progress fixed" style="width:100%">
      <span class="blue" style="width: 45%;"><span></span></span>
    </div>
  </div>
</div>

When the user dynamically resize the browser, the width of the bar will be fixed, but at least the animation will grow its width to the correct percentage upon a page refresh.
My example at: https://www.peircesec.moe.edu.sg/curriculum/english-lit-drama-draft/