I am referencing the animation of circle-ci homepage

I've tried a library called react-scroll-percentage which would update the value of variable percentage if I scroll it down.

Now, I have a few problems.

This is my current UI:

1. When I keep scrolling and arrive to my div with className container, it will NOT stop scrolling as circle-ci homepage did.
   
2. The update of percentage is not big enough. Even I scroll to the bottom of the page, the percentage will only be 0.5% at most, which is far from 100%

Can anyone give me suggestion of how I should do it?

App.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>
  );
}

style.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;
}

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