HTML5 Progress Element
HTM5 has a <progress> element, which can be used in Webflow using custom code;
- + It's Native to HTML 5, and widely supported.
- - No Webflow designer support. You must use an HTML Embed element to create these in Webflow.
- > + However, Webflow does render those HTML Embed <progress> elements in the designer, as you can see to the right.
- - No styling support in the Webflow designer. You must use custom CSS.
- > + However this styling can be seen in the designer if you place it also in an HTML Embed <style> element.
- Supports custom value and max, so you are not limited to 100%.
- + Inherent support for indeterminate values.
- > - But no easy way to leverage this in e.g. a Collection List databinding operation.
- Untested;
- > ? What happens if value is > max
- > ? Can Interactions be applied
DEMO
This demo is creating progress bars using HTML5's <progress> element. 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
This item has no progress, so the value is considered indeterminate.
of
92133
Eaque Dolores Dolore Rem
This item has no goal, so we hide the bar.
5903
of
Quae Asperiores Aspernatur
65389
of
391510
How to implement
Click the View in Webflow's Designer button at the top of this page, to explore the page design.
Pay particular attention to the scrollbars, and the CSS Embed at the top of the demo area.