I'm struggling to implement a custom progress bar for a website. This is the shape it's supposed to have:
When the user selects a circle, I want the line (and only the line, not the circles) to fill with a different color until it reaches that circle, and finally that red dot should appear in the middle, having this as a final result if the user clicked the third circle:
I have no idea of what might be the best, simpler approach to this. I've tried some pure CSS, jQuery and JavaScript solutions online but none can recreate this effect. Should I have two images and progressively overlay them until I reach the clicked dot only? Should I forget images entirely and try to recreate the shape with CSS or an SVG and change the color of a certain section?
I know usually questions here have code, but I can't show any because I've no idea of what approach to take and hours of research online led to an infinite number of solutions that don't apply to my case.
Thanks in advance.