How to represent a task flow with tasks timing information

I need to represent a task flow containing one to multiple tasks.

Requirements:

1) The flow is represented by tasks that has codes associated to it (OPER1, OPER2, ...)

2) I must be able to signal the current running task, or in other words, where is the process now.

3) The tasks behind the current one are completed and I need to represent its duration (XX hours and YY minutes).

4) The tasks in front of the current one shall be represented.

5) There may be delays between tasks (waiting time), that needs also to be represented.

That representation must make sense on a Web and mobile App (even being different UX elements, must have the same UX concept so that the user can get the same information).

Flows are normally represented using styled boxes and arrows connecting then, but I don't think this is the case here.

My first thought is to use horizontal bars where the bar length is the relative duration, with some spaces between them representing the waiting time:

I then tought about using circles where its size and spacing would represent the task duration and waiting time:

In fact I'm now sure if this is the way to go and decided to ask for some new ideas on that.

What can be used to provide such an information in a modern UX concept?