How to create progress bar with horizontal lines?

[dominik]

Does anyone have any suggestions on how to create a progress bar like the following:

I would be especially curious on how to create the horizontal lines and “blobs with the numbers”
Source: https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600

Thank you in advance for any ideas!

[campopianoa]

This could help:

Progress bar custom component

Hello, I required a flexible progress bar so I did my best to create one. My approach was to rely on the Vega Lite visualization library and treat the progress bar as a bar chart. [prog_gif_fast] progress bar clone: https://anvil.works/build#clone:CGKLX5XLHQ4ZCP2R=J7B33LSBKFVZDU3PFL4O6B4H Feel free to use it as a dependency if you feel that it would be helpful.

Also this:

Progress / Step UI Question

I took a stab and got pretty close. If you were to extrapolate from this vega-lite specification (json), you could turn this into a custom Anvil component (as I did with the progress bar). Vega-lite spec to get you started: { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"values": [{"x": 1, "y": 1, "z": ""}, {"x": 2, "y": 1,"z": ""}, {"x": 3, "y": 1, "z": ""}]}, "width": 500, "height": 200, "layer": [ {"mark": "line"}, {"mark": {"type": "point", "s…