how to create horizontal timeline with pin points

how to create horizontal timeline with pin points

  

I need to create this timeline which shows the progress of a subtask. 


Any help in how to achieve this would be great!



Cheers!

Leo

Well,

what do you think how to approach this?


Hi J,


My thought was like this ...

Approach 1:

Use Progress bar and increase the percentage based on the progress(statuses 30/75/100) where I can not have the pin points.


Approach 2:

Use a progress bar in combination with a circle icon 

However I couldn't change the colour of the progress bar as the mock up.



I am looking for any CSS hack or any simpler way to do this.

since it's only 3 marks, why not simple transparent images?


J. wrote:

since it's only 3 marks, why not simple transparent images?

Hi J,


I didn't really get it. Can you explain the option? I will try it out.