Automate progress bar width with a number taken from CMS content

Hello,


Screen Shot 2022-10-04 at 15.10.03
*

The website I’m building is a petitions site. The site collects signatures. My client would like to inclue a progress bar indicating how many signatures have been collected so far for the petition out of certain objective.

I created a normal progress bar and I manually change its width (25% if the petition collected 2,500 signatures out of 10,000 goal).

But because each petition is a CMS item, everytime I change the width of the progress bar, it changes every other bar in the other items.

So I have 2 questions:

  1. Is it possible to fetch the data of the number of signature and to “convert” it into a certain width?
  2. Is it possible to also do it for a petition that is a collection item?

I read this topic: Use CSS-Calc to control dimensions depending on a CMS variable which is a similar topic but doesn’t explain exactly what I need. This is why I’m creating my own topic

Thanks a lot in advance

Find below the read-only link of the project.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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.

Hello,

I would like to thank you for your detailed answer. I feel like I’m close to the end result but unfortunately it didn’t work.

Let me share the read only link: Webflow - Première Ligne

As you can see, there’s a bar that shows but nothing happens. No purple color, not fetching the data of this petition neither.

Do you have any idea what I did wrong?

I won’t be able to see anything until I’m back at my office next week. Hopefully you can figure it out before then. One thing I can see on your staged site is that you’ve added a bunch of design aspects like flexboxing and z-indexing to the containers. I’d sort out your progress bar solution first before you add all of those complications. At least do your R&D outside of that.

Read up on CSS calcs too, you should be able to find a reference where it’s used in exactly the way you want, to create a progress bar. Failing that, go with the <progress> element. Much more straightforward mechanically.

Absolutely no problem, I’ll be patient.

Unfortunately, I’m a beginner and I’m sure I made some mistakes without being sure of what I was doing lol.

I followed the different steps you recommended so I don’t think I’m too far from the solution.

Thanks again

Here are both progress bar approaches put together in a guide for you. Personally, I prefer the css calc approach, as it’s the most designer-compatible.

https://progress-bars-tests.webflow.io/css-calc-progress-bars

Click the top-right button to see how it’s built in the read-only designer view.