Framer Scroll bar

import type { ComponentType } from "react"
import { useState, useEffect, useRef } from "react"

export function withProgress(Component): ComponentType {
    return (props) => {
        const [progress, setProgress] = useState(0)

        useEffect(() => {
            const calculateProgress = () => {
                const startEl = document.getElementById("start")
                const endEl = document.getElementById("end")
                if (startEl && endEl) {
                    const sectionBeginPoint = startEl.offsetTop
                    const sectionEndPoint = endEl.offsetTop

                    const sectionHeight = sectionEndPoint - sectionBeginPoint
                    const sectionProgress =
                        (window.pageYOffset / sectionHeight) * 100
                    setProgress(sectionProgress)
                }
            }
            calculateProgress()
            window.addEventListener("scroll", calculateProgress)
            return () => {
                window.removeEventListener("scroll", calculateProgress)
            }
        }, [])

        return (
            <Component
                {...props}
                style={{
                    width: `${progress}%`,
                    transition: "width 0.2s ease-in-out",
                }}
            />
        )
    }
}