diff --git a/src/App.vue b/src/App.vue
index 19c97cd..0e9be03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,9 @@
             primaryColor: designStore.appTheme,
             primaryColorHover: '#57a3f3',
           },
+          LoadingBar: {
+            colorLoading: designStore.appTheme,
+          },
         };
       });
 
diff --git a/src/components/Application/Application.vue b/src/components/Application/Application.vue
index 5d1623b..f02a24e 100644
--- a/src/components/Application/Application.vue
+++ b/src/components/Application/Application.vue
@@ -1,6 +1,5 @@
 <template>
   <n-loading-bar-provider>
-    <LoadingContent />
     <n-dialog-provider>
       <DialogContent />
       <n-notification-provider>
@@ -21,7 +20,6 @@
     NMessageProvider,
     NLoadingBarProvider,
   } from 'naive-ui';
-  import { LoadingContent } from '@/components/LoadingContent';
   import { MessageContent } from '@/components/MessageContent';
   import { DialogContent } from '@/components/DialogContent';
 
@@ -32,7 +30,6 @@
       NNotificationProvider,
       NMessageProvider,
       NLoadingBarProvider,
-      LoadingContent,
       MessageContent,
       DialogContent,
     },
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b479c2a..5066326 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -65,6 +65,7 @@
   import { PageFooter } from './components/Footer';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useLoadingBar } from "naive-ui";
 
   export default defineComponent({
     name: 'Layout',
@@ -135,6 +136,8 @@
 
       onMounted(() => {
         window.addEventListener('resize', watchWidth);
+        //挂载在 window 方便与在js中使用
+        window['$loading'] = useLoadingBar();
       });
 
       return {
diff --git a/src/router/router-guards.ts b/src/router/router-guards.ts
index c48f245..1ad883a 100644
--- a/src/router/router-guards.ts
+++ b/src/router/router-guards.ts
@@ -12,8 +12,8 @@ const whitePathList = [LOGIN_PATH]; // no redirect whitelist
 export function createRouterGuards(router: Router) {
   const userStore = useUserStoreWidthOut();
   const asyncRouteStore = useAsyncRouteStoreWidthOut();
-  const Loading = window['$loading'] || null;
   router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
     Loading && Loading.start();
     if (from.path === LOGIN_PATH && to.name === 'errorPage') {
       next(PageEnum.BASE_HOME);
@@ -91,6 +91,7 @@ export function createRouterGuards(router: Router) {
       }
     }
     asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
+    const Loading = window['$loading'] || null;
     Loading && Loading.finish();
   });
 
diff --git a/yarn.lock b/yarn.lock
index 0cee879..c6bf800 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5123,11 +5123,6 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-nprogress@^1.0.0-1:
-  version "1.0.0-1"
-  resolved "https://registry.npmjs.org/nprogress/-/nprogress-1.0.0-1.tgz#dd4cce2b951f9359028facd6c51cc9c49ecfa1a2"
-  integrity sha512-Gr/Km0nIMbR7hOB0fjGx7nR0oRjTy9M61dXiQL5bfTBq0cQ+hNgt6gxE062j7Bxm+L/IjNVOr41iu2hrDeuedw==
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"