How to calculate the spent value as a percentage of the worker?

Question

JavaScript

Hello.
I have
- start time
- end time
- current time It is

necessary to show on the screen how many percent of the beginning of the working day has already passed, you need to show the "fullness indicator"

I sketched an example where from 10 to 23 is a working day and the green bar shows what time it is now , but I see that it doesn’t work correctly, the green strip is not in its place, approximately there, of course, but it’s still not right, and for some reason the first hour of working time is swallowed up somewhere (it starts not from 10, but from 11 and I don't understand why)
link to codepen Thanks

in advance for help with the location of the green bar and the first hour

Answer 1

end / start * 100 = %
Just calculate the end mark, the start mark and get the percentage, everything is somehow confused with the pene code

Answer 2

And the timestamps on the timeline (spans) do not fall because the last two labels do not have indents.
It's better to give them a fixed width, and center the text.