Implementing an animated progress bar for tracking article read progress.

I'm trying to animated a bar using css, the default continuous bar works fine, but I have a list of divs (say 10 divs) that are little squares in a row, and I want to paint x number of squares based on how much the css bar is animated. say 50% of the bar is animated so i'm at keyframe 5/10, I want to translate that progress to the number 5 and then render 5 filled blocks in my div list I'm using react and plain css. Here is my css, I took it from https://scroll-driven-animations.style/demos/progress-bar/css/ as you see on the screen, there is a red bar at the top which shows the scroll percentage (how far we have scrolled from the top of the article. and the green blocks that are filled are showing the same progress but in discrete units. (it's currently not working propertly the filled in ones are just a random number) in my latest approach I tried making a new css @property (--scrolled) and inside the keyframes interpolated between 0 and x (say 20 blocks) in my animation keyframes, but I'm not able to access the updated --scrolled property with js, I'm not even seeing it be updated on dev console. Anyone got any ideas for what I'm trying to achieve?