diff --git a/nezha-fronted/src/assets/css/common/loading.scss b/nezha-fronted/src/assets/css/common/loading.scss
index effc792d5..b5123efe8 100644
--- a/nezha-fronted/src/assets/css/common/loading.scss
+++ b/nezha-fronted/src/assets/css/common/loading.scss
@@ -101,3 +101,110 @@ loading-hide{
     height: 16px;
   }
 }
+/** start of bars1 */
+.bars1 {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 50px;
+  width: 50px;
+  margin: -25px 0 0 -25px;
+}
+
+.bars1 span {
+  position: absolute;
+  display: block;
+  bottom: 10px;
+  width: 9px;
+  height: 5px;
+  background: rgba(0, 0, 0, 0.25);
+  -webkit-animation: bars1 1.5s  infinite ease-in-out;
+  animation: bars1 1.5s  infinite ease-in-out;
+}
+
+.bars1 span:nth-child(2) {
+  left: 11px;
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+.bars1 span:nth-child(3) {
+  left: 22px;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.bars1 span:nth-child(4) {
+  left: 33px;
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.bars1 span:nth-child(5) {
+  left: 44px;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+@keyframes bars1 {
+  0% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+  25% {
+    height: 30px;
+    -webkit-transform: translateY(15px);
+    transform: translateY(15px);
+    -webkit-transform: translateY(15px);
+    transform: translateY(15px);
+    background: #000000;
+  }
+  50% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+@-webkit-keyframes bars1 {
+  0% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+  25% {
+    height: 30px;
+    -webkit-transform: translateY(15px);
+    transform: translateY(15px);
+    background: #000000;
+  }
+  50% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+  100% {
+    height: 5px;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+/** END of bars1 */
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index fd0a4d07a..abb506df2 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -102,7 +102,7 @@ export const myLoading = {
   bind: myLoadingFunction,
   update: myLoadingFunction,
   unbind: function (el, binding) {
-    const className = binding.arg || 'el-loading-mask'
+    const className = binding.arg || 'bars1'
     const ds = el.getElementsByClassName(className)[0]
     if (ds) {
       el.removeChild(ds)
@@ -110,7 +110,7 @@ export const myLoading = {
   }
 }
 function myLoadingFunction (el, binding, vnode) {
-  const className = binding.arg || 'el-loading-mask'
+  const className = binding.arg || 'bars1'
   const ds = el.getElementsByClassName(className)[0]
   if (binding.value) {
     if (ds) {
@@ -118,7 +118,7 @@ function myLoadingFunction (el, binding, vnode) {
     }
     //  若果是true创建一个div
     const divBox = document.createElement('div')
-    divBox.setAttribute('class', 'el-loading-mask')
+    divBox.setAttribute('class', 'bars1')
     const div = document.createElement('div')
     div.style.textAlign = 'center'
     if (binding.modifiers.scaleMin) {
@@ -127,18 +127,17 @@ function myLoadingFunction (el, binding, vnode) {
     if (binding.modifiers.scaleMax) {
       div.style.transform = 'scale(2)'
     }
-    if (className === 'ldsFacebook') {
-      const newDiv1 = document.createElement('div')
-      const newDiv2 = document.createElement('div')
-      const newDiv3 = document.createElement('div')
+    if (className === 'bars1') {
+      const newDiv1 = document.createElement('span')
+      const newDiv2 = document.createElement('span')
+      const newDiv3 = document.createElement('span')
+      const newDiv4 = document.createElement('span')
+      const newDiv5 = document.createElement('span')
       div.appendChild(newDiv1)
       div.appendChild(newDiv2)
       div.appendChild(newDiv3)
-    }
-    if (className === 'el-loading-mask') {
-      const newDiv1 = document.createElement('div')
-      newDiv1.setAttribute('class', 'el-loading-spinner')
-      div.appendChild(newDiv1)
+      div.appendChild(newDiv4)
+      div.appendChild(newDiv5)
     }
     divBox.appendChild(div)
     //  插入到被绑定的元素内部
@@ -148,11 +147,11 @@ function myLoadingFunction (el, binding, vnode) {
     //  el 元素设置相对定位   div设置绝对定位
     console.log(el.className)
     const elClassname = el.className.split(' ')
+    console.log(elClassname)
     if (elClassname.indexOf('my-loading-parent--relative') === -1) {
-      className.push('my-loading-parent--relative')
-      el.className = className.join(' ')
+      elClassname.push('my-loading-parent--relative')
+      el.setAttribute('class', elClassname.join(' '))
     }
-    // el.setAttribute('class', 'el-loading-parent--relative')
     //  设置绝对定位
     div.setAttribute('class', className)
   } else {
@@ -161,6 +160,9 @@ function myLoadingFunction (el, binding, vnode) {
       el.removeChild(ds)
     }
   }
+}
+function myLoadingFunctionUpdate(el, binding, vnode) {
+
 }
 export const cancelWithChange = {
   bind: function (el, binding) {
diff --git a/nezha-fronted/src/components/layout/home.vue b/nezha-fronted/src/components/layout/home.vue
index 88c3739fe..6f960e0fb 100644
--- a/nezha-fronted/src/components/layout/home.vue
+++ b/nezha-fronted/src/components/layout/home.vue
@@ -3,7 +3,7 @@
     <left-menu @refresh="refresh"></left-menu>
     <div ref="body" class="body">
       <Header></Header>
-      <container v-if="containerShow" ref="container" v-my-loading:ldsFacebook="myLoading"></container>
+      <container v-if="containerShow" ref="container" v-my-loading="myLoading"></container>
     </div>
     <!--web-ssh-->
     <web-ssh ref="webSsh"></web-ssh>