diff --git a/index.html b/index.html
index 40e8d14..415a5e3 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,6 @@
content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！"
/>
-
vue-next-admin
diff --git a/public/loading.css b/public/loading.css
deleted file mode 100644
index 8280a21..0000000
--- a/public/loading.css
+++ /dev/null
@@ -1 +0,0 @@
-.loading-next{width:100%;height:100%}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-next .loading-next-box-warp{width:80px;height:80px}.loading-next .loading-next-box-warp .loading-next-box-item{width:33.333333%;height:33.333333%;background-color:#409eff;float:left;animation:loading-next-animation 1.2s infinite ease;border-radius:1px}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7){animation-delay:0s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8){animation-delay:.1s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9){animation-delay:.2s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6){animation-delay:.3s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3){animation-delay:.4s}@keyframes loading-next-animation{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}
\ No newline at end of file
diff --git a/src/theme/loading.scss b/src/theme/loading.scss
new file mode 100644
index 0000000..663bde0
--- /dev/null
+++ b/src/theme/loading.scss
@@ -0,0 +1,51 @@
+.loading-next {
+ width: 100%;
+ height: 100%;
+}
+.loading-next .loading-next-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+.loading-next .loading-next-box-warp {
+ width: 80px;
+ height: 80px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item {
+ width: 33.333333%;
+ height: 33.333333%;
+ background: var(--color-primary);
+ float: left;
+ animation: loading-next-animation 1.2s infinite ease;
+ border-radius: 1px;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
+ animation-delay: 0s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
+ animation-delay: 0.1s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
+ animation-delay: 0.2s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
+ animation-delay: 0.3s;
+}
+.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
+ animation-delay: 0.4s;
+}
+@keyframes loading-next-animation {
+ 0%,
+ 70%,
+ 100% {
+ transform: scale3D(1, 1, 1);
+ }
+ 35% {
+ transform: scale3D(0, 0, 1);
+ }
+}
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
index c9cd7f1..2e75e2e 100644
--- a/src/utils/loading.ts
+++ b/src/utils/loading.ts
@@ -1,7 +1,16 @@
import { nextTick } from 'vue';
+import loadingCss from '/@/theme/loading.scss';
// 定义方法
export const NextLoading = {
+ // 载入 css
+ setCss: () => {
+ let link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = loadingCss;
+ link.crossOrigin = 'anonymous';
+ document.getElementsByTagName('head')[0].appendChild(link);
+ },
// 创建 loading
start: () => {
const bodys: any = document.body;