In my React app, I need to make a horizontal line that goes across the width of one of the divs. The div itself is scrollable. The horizontal line is supposed to be a respresentation of the current time. I can’t use CSS animations because the lines will be desynced if someone opens up the app on a different browser.

The horizontal line should start at “8AM” and gradually scroll inside of this div throughout the day until “5PM”. But the line’s position should somehow be calculated from the current time. That way, if someone refreshes the page or opens it up on another device, the line is still in the spot it’s supposed to be.

Google Calendar is a great example of what I’m trying to go for. It shows a red line across the div which represents the current time.
google calendar example

I’d greatly appreciate any advice or tips on things I can try in order to create this.

Originally tried it with CSS keyframes, but I quickly realized that wouldn’t work – for reasons I describe in the post. I currently have a Box component (using Chakra UI) which displays a simple line across the whole div, but I haven’t figured out how to make it scroll. I’m thinking with a useEffect that incrementally updates the line’s position on the page, but I’m not sure how to calculate that in relation to the current time.