Как сделать заливку при скролле?
Вот например codyhouse.co/demo/icons-filling-effect там статья с пояснениями есть
Видно вы много оливье скушали, раз думаете, что в CSS можно отслеживать скролл.
Тут надо JS, и немало причем. Или либу найти делающую похожее.
jsfiddle.net/cgspicer/V4qh9
Как вариант дичайшего костыля, создать элементы с каждым шагом и спрятать их.
И при скролле через DOM-манипуляции заменять одно на другое, этол если вам лень писать нормальный js