How to make a progress bar like the ones WIX has?

Ask the community
,
1

I would like to make a progress bar like the ones wix has. (example below)


I found a wix article about progress bars, but it requires you to add values manually.

757×142 5.91 KB

Just like in the wix support articles, i’d like it to move as i scroll.

How can i do this?

Thanks,
Dillon

2

The progress bar elements are horizontal and you want a vertical progress bar.
So there are 2 directions:

  1. Using pure Corvid:

  2. you can create a repeater, put a vertical line from the top of the repeater item to its bottom (leave no space between repeater items, and allow 1 item per row.

  3. In the middle of each repeater item put a hidden arrow shape, and show it when the user moves to this stage (each repeater item should of course contains the required text).

  4. Use custom element or iframe. Then you can use CSS and html to create it (you can find plenty of example on the web).

Which one to choose?
It depends on you html-css knowledge.
The first option is an annoying workaround, so the second one is preferred if you know how to do it.

3

My coding knowledge it limited. If I were to go with option no.1, how would I make it move with scrolling?

4

@mycreativespot Add anchors to your page and add an onViewportEnter event handlers to the anchors.
Once anchor2 gets into the viewport you hide all the repeater arrows and show item2 arrow element (using reapeter.forItems ).

P.S.
You should know that going for this option, will take you some time. Especially, to make the deign fit to the full item container height. I’ve done it before (with a timeline, not a progress bar), and it was a time-consuming task (Then they released the custom elements and I moved to it).

1 Like