Estoy haciendo referencia a la animación de la página de inicio de circle-ci

Probé una biblioteca llamada react-scroll-percentage que actualizaría el valor del percentage variable si lo desplazo hacia abajo.

Ahora, tengo algunos problemas.

Esta es mi interfaz de usuario actual:

1. Cuando sigo desplazándome y llego a mi div con el container className, NO dejará de desplazarme como lo hizo la página de inicio de circle-ci.
   
2. La actualización del porcentaje no es lo suficientemente grande. Incluso si me desplazo hasta la parte inferior de la página, el porcentaje será solo del 0,5 % como máximo, lo que está lejos del 100 %.

¿Alguien puede darme una sugerencia de cómo debo hacerlo?

Aplicación.jsx

 import "./styles.css"; import { useScrollPercentage } from "react-scroll-percentage"; export default function App() { const [ref, percentage] = useScrollPercentage({ threshold: 0 }); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <h2>{`Percentage scrolled: ${percentage.toPrecision(2)}%.`}</h2> <div className="container" ref={ref}> <div className="check-line"> <div className="check-progress" style={{ width: percentage }} /> </div> </div> <div style={{ marginTop: "50px", height: "400px", width: "100%", border: "1px solid red" }} ></div> </div> ); }

estilo.css

 .App { font-family: sans-serif; text-align: center; } .container { position: relative; border: 1px solid grey; height: 90px; width: 100%; } .check-line { position: absolute; top: 26px; z-index: -1; left: 12.5%; right: 12.5%; height: 1px; background-color: #f3f3f3; } .check-progress { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: green; }

Códigosycaja:
https://codesandbox.io/s/serverless-rain-5l8w5?file=/src/styles.css:0-405