Hey Marc, welcome to the community.
You’re pretty close here. First, to support your % calculation, you’ll want to store your Current and Goal amounts in your Petitions collection. Create two number fields there, and populate those, and then you can use them to calculate progress %.
For the progress bar itself, you have at least 3 options… CSS Calc, HTML5’s <progress> element, or jQuery-UI.
In the CSS calc approach, you would use the calc() technique in CSS like Martijn demo’d…
To do this, you’d replace your progress bar DIVs with an HTML embed, and paste your DIV-generated code in there, which looks something like this;
<div class="donate-bar" style="width: 100%; background-color: rgb(208, 208, 221); height: 25px;">
<div class="progress-bar" style="width:calc( Current / Goal )%"></div>
</div>
Then you add your style width calc to your inner DIV as you can see above.
Notice that you’re calculating the fraction inline, e.g. width:calc( Current / Goal )% with Current and Goal being the CMS embedded fields you added above. I haven’t tested this CSS syntactically but the calc is simple.
If you want to avoid CSS calc, you could switch to a standard HTML5 <progress> element. This works great, but styling is some gnarly work as the CSS is still heavily browser-specific.
Here’s a demo;
https://progress-bar-9a86bf.webflow.io/
With the CSS in a codepen, and the project link.