当页面加载时，在页面顶部加上进度条，可以感知到页面正在加载，而不是类似于卡死的现象。

如github上这种

安装

npm install nprogress
npm install @types/nprogress --save-dev

使用

我这个是next.js项目，在 _app.tsx里使用即可。
监听路由的开始和结束事件，开始时启动进度条，结束或发生错误时结束进度条。

//需要import相关的库和样式
import NProgress from "nprogress";
import "nprogress/nprogress.css"

export default function App({ Component, pageProps }: AppProps) {

  useEffect(() => {

    Router.events.on('routeChangeStart', ()=>{
      NProgress.start();
    })
    Router.events.on('routeChangeComplete', ()=>{
      NProgress.done();
    })
    Router.events.on('routeChangeError', ()=>{
      NProgress.done();
    })

  }, [Router])

  return <>
    <Component {...pageProps} />
  </>
}