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?


Solution

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.

Solution

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.