HTML Progress Bar with divs

So I’m trying to create an HTML progress bar using 2 divs. My code currently looks like this.

<ion-pane scroll="false">
      <div class="progress-bar col-50">
      	<div class="bar-fill"></div>
      </div>
</ion-pane>

Now I can’t add any plugins because this isn’t my personal project. This progress bar is placed under some cards within a div.container and is currently making the cards not visible. How can I make the cards visible again?

Hopefully that makes sense.
Thanks for the help!

Did you try the ‘progress’ element? No need for divs then.
See https://css-tricks.com/html5-progress-element/