Automate progress bar width with a number taken from CMS content

Design help Custom code
1

Hello,

Screen Shot 2022-10-04 at 15.09.57
Screen Shot 2022-10-04 at 15.09.571897×855 81.5 KB

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)

2

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…

image
image801×139 6.48 KB

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.

3

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?

4

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.

5

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

6

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.

1 Like
7

thank you so much! this example was extremely helpful

1 Like