Progress bar in relative to element below it

JavaScript
,
1

I’m stuck at doing the progress bar in relative to the container below it.

Here’s the detail:

  1. I made 3 containers.
  2. Each containers background will change in color if it is located slightly on top of the user viewport by adding a highlight class.
  3. Now, I add a single line between those containers to act as a progress bar.
  4. The first progress bar gonna move from right to left, while the second progress bar gonna move from left to right.

I’m stuck at no.3 and no.4, and after some googling, I only found progress bar for the container height, not when it reach a certain container. Any insight?

Here’s the codepen for what I got so far.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.