nprogress页面加载进度条

一、nprogress 简介

NProgress（缩写为“nanoscopic progress”）是一个 JavaScript 库，提供了一种简单轻量的方式，在网页上显示加载进度条或旋转加载图标。通常用于向用户指示网页正在加载或在后台执行某些任务。NProgress 经常在单页面应用（SPA）或异步网络应用中使用，通过提供视觉反馈来增强用户体验。

NProgress 提供了简约而不显眼的界面。当包含在网站项目中时，它会在页面状态发生变化时自动在页面顶部显示一个细长的进度条。这个进度条会在内容加载或发出请求时平滑地动画，向用户显示进度。

二、nprogress 使用

nprogress 安装

npm install nprogress

# ts增加类型
npm install @types/nprogress -D

• NProgress.start()进度条开始
• NProgress.done()进度条结束
• NProgress.configure(options)进度条配置:

NProgress.configure({
  easing: "ease", // 动画方式，和css动画属性一样（默认：ease）
  speed: 500, // 递增进度条的速度，单位ms（默认： 200）
  showSpinner: false, // 是否显示加载ico
  trickle: true, //是否自动递增
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比，0-1（默认：0.08）
  parent: "#__nprogress__container", //指定此选项以更改父容器（默认：body）
});

三、react 中使用 nprogress

import { Outlet } from "react-router-dom";
import NProgress from "nprogress";
import "./nprogress.css";

export default function Admin() {
  return (
    <div className="admin-main" id="__nprogress__container">
      <Suspense fallback={<NProgressFallback />}>
        <Outlet />
      </Suspense>
    </div>
  );
}

function NProgressFallback() {
  useEffect(() => {
    NProgress.configure({
      easing: "ease", // 动画方式，和css动画属性一样（默认：ease）
      speed: 500, // 递增进度条的速度，单位ms（默认： 200）
      showSpinner: false, // 是否显示加载ico
      trickle: true, //是否自动递增
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3, // 初始化时的最小百分比，0-1（默认：0.08）
      parent: "#__nprogress__container", //指定此选项以更改父容器（默认：body）
    });
    NProgress.start();
    return () => {
      NProgress.done();
    };
  }, []);
  return (
    <Spin size="large">
      <div style={{ height: "calc(100vh - 200px)", width: "100%" }}></div>
    </Spin>
  );
}

• nprogress.css:

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #1677ff;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #1677ff, 0 0 5px #1677ff;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #1677ff;
  border-left-color: #1677ff;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}