easy-nav-progress

😊 A simple top navigation transition progress bar.
😊 Based on react.
😊 Will change speed.
⚠️ Do not use button clicks to trigger transition effects too frequently, as this may result in unexpected and undesirable effects.

// main.tsx
import ProgressBarProvider from 'easy-nav-progress';

<ProgressBarProvider>
  <App/>
</ProgressBarProvider>

// demo.tsx
import { useProgressBar } from 'easy-nav-progress';

const { start, done } = useProgressBar()

useEffect(() => {
  const f = async () => {
    start();

    /**
     * Simulation:
     * when the target page has important data that needs to be loaded in advance,
     * you can jump after the data is loaded, and the transition effect during the waiting period.
     */
    await new Promise((resolve) => setTimeout(resolve, 2_000));

    done();

    navigate("/x");
  }
  f()
}, [])