DIVs + CSS calc() progress bars
Another progress bar approach is to nest two DIVs, and then calculate the inner DIV's % width using CSS calc();
- + CSS calc() is widely supported.
- - Must use an HTML Embed element to create these in Webflow, due to the custom style attribute needed on the DIV.
- > + However you can see this in the designer.
- + Full styling support in the designer, since you are simply styling two DIVs.
- Untested;
- > ? What happens if value is > max
- > ? What Interactions are interesting here
DEMO
This demo is creating progress bars using DIVs and CSS, from a collection. In the collection are both a progress amount, and a max amount, from which the progress bar is created.
The styling of the progress bar is done in the designer, and you can see this e.g. in the Style Guide at the bottom of this page.
Quia Facere Illo Minus
13139
of
91316
Voluptatibus Aliquid Reiciendis
59663
of
62640
Fugit Molestiae Cumque
39378
of
59670
Est
86580
of
273351
Qui Et
7443
of
73090
Ut Sint Fuga
10155
of
56310
Ut Consequatur Est Numquam
91419
of
535000
Et
of
92133
Eaque Dolores Dolore Rem
5903
of
Quae Asperiores Aspernatur
65389
of
391510
Style Guide
In your Style Guide page, you can define the styling of your progress bar classes easily. Here's an example of that approach;
How to implement
Click the View in Webflow's Designer button at the top of this page, to explore the page design.