CSS Calc() Progress Bar

CSS _calc() allows you to dynamically calculate aspects of your styling, and can be used to create elements like a progress bar.

It's also widely supported.

A very simple implementation in a CMS Collection List, where you have Progress and Goal as numeric fields, might look like this;

Demo

• Demo site
• Demo project

Resources

• ‍MDN - CSS calc()‍
• A Complete Guide to calc() in CSS

‍