diff --git a/src/assets/styles/nprogress.scss b/src/assets/styles/nprogress.scss
new file mode 100644
index 00000000..c6c2b832
--- /dev/null
+++ b/src/assets/styles/nprogress.scss
@@ -0,0 +1,55 @@
+#nprogress {
+    pointer-events: none;
+    .bar {
+        position: fixed;
+        z-index: 1031;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: $g-nprogress-color;
+    }
+    .peg {
+        display: block;
+        position: absolute;
+        right: 0;
+        width: 100px;
+        height: 100%;
+        opacity: 1;
+        transform: rotate(3deg) translate(0, -4px);
+        box-shadow: 0 0 10px $g-nprogress-color, 0 0 5px $g-nprogress-color;
+    }
+    .spinner {
+        display: block;
+        position: fixed;
+        z-index: 1031;
+        top: 11px;
+        right: 14px;
+        .spinner-icon {
+            width: 18px;
+            height: 18px;
+            box-sizing: border-box;
+            border: solid 2px transparent;
+            border-radius: 50%;
+            animation: nprogress-spinner 400ms linear infinite;
+            border-top-color: $g-nprogress-color;
+            border-left-color: $g-nprogress-color;
+        }
+    }
+}
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+    #nprogress .spinner,
+    #nprogress .bar {
+        position: absolute;
+    }
+}
+@keyframes nprogress-spinner {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/src/assets/styles/resources/themes.scss b/src/assets/styles/resources/themes.scss
index 3d7de048..539b9fcb 100644
--- a/src/assets/styles/resources/themes.scss
+++ b/src/assets/styles/resources/themes.scss
@@ -1,7 +1,8 @@
-// 【主区域】
-// 背景色
+/* ----- 应用 ----- */
+// 主区域背景色
 $g-main-bg: #f0f2f5;
-// 【头部】
+
+/* ----- 顶部 ----- */
 // 背景色
 $g-header-bg: #222b45;
 // 文字颜色
@@ -16,7 +17,8 @@ $g-header-menu-hover-bg: #334067;
 $g-header-menu-active-color: #fff;
 // 导航选中背景色
 $g-header-menu-active-bg: #334067;
-// 【主侧边栏】
+
+/* ----- 主导航 ----- */
 // 背景色
 $g-main-sidebar-bg: #222b45;
 // 菜单文字颜色
@@ -29,7 +31,8 @@ $g-main-sidebar-menu-hover-bg: #334067;
 $g-main-sidebar-menu-active-color: #fff;
 // 菜单选中背景色
 $g-main-sidebar-menu-active-bg: #334067;
-// 【次侧边栏】
+
+/* ----- 次导航 ----- */
 // 背景色
 $g-sub-sidebar-bg: #fafafa;
 // 菜单背景色
@@ -44,3 +47,6 @@ $g-sub-sidebar-menu-hover-bg: darken(#fafafa, 10);
 $g-sub-sidebar-menu-active-color: #e7f4ff;
 // 菜单选中背景色
 $g-sub-sidebar-menu-active-bg: #5482ee;
+
+/* ----- 进度条 ----- */
+$g-nprogress-color: #29d;
diff --git a/src/router/index.js b/src/router/index.js
index e1540f7e..7d15977f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,7 +4,7 @@ import { useKeepAliveOutsideStore } from '@/store/modules/keepAlive'
 import { useUserOutsideStore } from '@/store/modules/user'
 import { useMenuOutsideStore } from '@/store/modules/menu'
 
-import './nprogress.css'
+import '@/assets/styles/nprogress.scss'
 import { useNProgress } from '@vueuse/integrations/useNProgress'
 const { isLoading } = useNProgress()
 
diff --git a/src/router/nprogress.css b/src/router/nprogress.css
deleted file mode 100644
index 041d4a9c..00000000
--- a/src/router/nprogress.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-    pointer-events: none;
-}
-#nprogress .bar {
-    background: #29d;
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 100px;
-    height: 100%;
-    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
-    opacity: 1;
-    transform: rotate(3deg) translate(0, -4px);
-}
-.nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-}
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-    position: absolute;
-}
-@keyframes nprogress-spinner {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-@keyframes nprogress-spinner {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}