How to make progressbars run one by one?

Question

css

Good day.
The site has a section with 5 blocks (each block has a progress bar), each block has an opacity.
As planned, at the moment when the user has scrolled, opasity is removed one by one, and the progress bars are filled in the same way one by one.
Question: how to fill the progressbars one by one?
Thanks for the help.
PS In JS, I’m not particularly strong, for some reason the code doesn’t want to run on codpen (((((((((((although everything works for me.

https://codepen.io/aliakseibarsukov/pen/zYwrzYR

Answer 1

For your tasks if there are a lot of ready-made libraries.
For example, the second link in Google: https://michalsnik.github.io/aos/