How can I draw an animated line which illustrates flow between two points via OpenLayers?

I need to be able to illustrate water flowing from one point to another.

I have been trying to design a line similar to the progress bar from Bootstrap (https://getbootstrap.com/docs/4.3/components/progress/#animated-stripes) without luck. I have researched for quite a while and not able to find a way or extension which were able to solve my problem.

I am therefore asking an OpenLayers export for help.

Solution

You can do this by setting the line styles up in the following manner:

Draw a solid stroke/line
Draw a dashed stroke/line over the top with a smaller width
On a timer, increment the lineDashOffset of the dashed line, which will give an animation effect