Dynamic progress bar in Collection List

Design help Custom code
1

Dear Wonderful Webflow Community!

Here’s a tricky one that I believe can probably be solved with some short but elegant code.

I’m trying to add a progress bar to each collection item within a collection list. The length of this progress bar should be determined by a numeric value that is contained in the CMS.

e.g. Attendance in the CMS = 0 (Bar should be non-existent)
e.g. Attendance in the CMS = 5 (Bar should be full, if the max amount is also 5)

I have added an HTML Embed with custom code to size the progress bar, however, all the collection items seem to use the first item’s value to size the progress bar and they all look the same size.
Here is my custom code:

.behind-stars {width: calc({average}*100%/5);}

Please help! I can’t seem to figure it out!

Thanks in advance :pray:
Will

Here is my site Read-Only: Webflow - Big Meal Share

@vincent da man… maybe you can help?

2

HI @WillSayer this would not work. You will need custom JS to iterate over each item to calculate value and set bg width.

something like this

const [...ratings] = document.querySelectorAll('.rating-holder')

ratings.map(rating =>{
	const bg = rating.querySelector('.rating-bg');
	const currRate = rating.querySelector('.rating').innerText;
	const perCent = currRate * 10
	bg.style.width = `${perCent}%`
	
})

RESULT EXAMPLE (rating 0 - 10)

CleanShot 2022-11-05 at 00.29.20
CleanShot 2022-11-05 at 00.29.201420×926 232 KB

3

If you want a star rating, and the value is always between 0 and 5, then you can use Sygnal’s WFU library to add a ratings element easily;

You just drop an Html Embed in, and paste this

<div wfu="rating" wfu-rating="5.0"></div>

Replace the rating value with your CMS field.

Wrap it in a div, and size how you like. The stars are SVGs so they won’t pixellate.

If you’re looking for actual progress bars, that’s a slightly different thing in that there is a current value, a maximum value, etc. HTML 5 offers that but I prefer a CSS calc() approach. Both are detailed here;

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

4

Hey @Stan

Thanks so much for all of this! I tried your method but it was a little complex for me so I ended up using the solution below which turned out to be easy to implement, I really appreciate the effort though, and wish I had the technical background to fully understand your solution.

Kind regards,
Will

1 Like
5

Hey @memetican

Thanks so so so much!! This is such a simple solution, I ended up using the CSS Cacl() as you mentioned and it worked splendidly! And Thanks for the speedy response :slight_smile:

Kind regards,
Will

1 Like
6

Hi @WillSayer that’s absolutely fine I’m glad to see you have been able to solve your request. The solution I have provided use plain JS mean doesn’t require any external library and for simple task like that loading library is IMO overkill. On you web you have developer in team so I thought he will know how to use it. :wink: Anyway, now I understand that at this point no-code is better solution.
Good luck

1 Like