diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index c5677499a5c..0110aef8268 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -12,6 +12,7 @@ import { createStateGuard } from './stateGuard';
 import nProgress from 'nprogress';
 import projectSetting from '/@/settings/projectSetting';
 import { createParamMenuGuard } from './paramMenuGuard';
+import NProgress from '/@/utils/lib/progress';
 
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
@@ -52,6 +53,8 @@ function createPageLoadingGuard(router: Router) {
   const appStore = useAppStoreWithOut();
   const { getOpenPageLoading } = useTransitionSetting();
   router.beforeEach(async (to) => {
+    NProgress.start();
+
     if (!userStore.getToken) {
       return true;
     }
@@ -67,6 +70,8 @@ function createPageLoadingGuard(router: Router) {
     return true;
   });
   router.afterEach(async () => {
+    NProgress.done();
+
     if (unref(getOpenPageLoading)) {
       // TODO Looking for a better way
       // The timer simulates the loading time to prevent flashing too fast,
diff --git a/src/utils/lib/progress.ts b/src/utils/lib/progress.ts
new file mode 100644
index 00000000000..dfe7adc208c
--- /dev/null
+++ b/src/utils/lib/progress.ts
@@ -0,0 +1,16 @@
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+NProgress.configure({
+  // Changes the minimum percentage used upon starting
+  minimum: 0.1,
+  // Adjust animation settings using easing (a CSS easing string) and speed (in ms)
+  easing: 'ease',
+  speed: 500,
+  // Turn off loading spinner by setting it to false
+  showSpinner: false,
+  // Adjust how often to trickle/increment, in ms
+  trickleSpeed: 200,
+});
+
+export default NProgress;