asder

src/global.less

@@ -1019,3 +1019,58 @@ body,
   color: #999999 !important;
   margin-right: 12px;
 }
+
+.loader {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(#ee280e, #15a0f7, #6ed15a);
+  animation: animate7712 1.2s linear infinite;
+}
+
+@keyframes animate7712 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(#ee280e, #15a0f7, #5ad15a);
+}
+
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  background: #333;
+  border: solid #333 10px;
+  border-radius: 50%;
+}
+
+.loader span:nth-child(1) {
+  filter: blur(5px);
+}
+
+.loader span:nth-child(2) {
+  filter: blur(10px);
+}
+
+.loader span:nth-child(3) {
+  filter: blur(25px);
+}
+
+.loader span:nth-child(4) {
+  filter: blur(50px);
+}

src/layouts/index.jsx

@@ -73,6 +73,7 @@ function Layout({ children, location }) {
   const [vals, setvals] = useState({});
   const [colls, setcolls] = useState(false);
   const [changes, setchanges] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const arrs = useMemo(() => {
     let arr = [];
@@ -90,6 +91,10 @@ function Layout({ children, location }) {
       left: 0,
       behavior: 'smooth',
     });
+
+    window.onload = function () {
+      setLoading(false);
+    };
   }, [location.pathname]);
 
   function setval(key, val) {
@@ -117,6 +122,17 @@ function Layout({ children, location }) {
 
   return (
     <div className={styles.container}>
+      {loading && (
+        <div className={styles?.loadcontent}>
+          <div className="loader">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      )}
+
       <Drawer
         open={collspan}
         title={false}

src/layouts/index.less

 .container {
   height: 100%;
   overflow: hidden;
+  position: relative;
   li {
     span {
       text-align: center !important;
@@ -40,6 +41,38 @@
       }
     }
   }
+  .loadcontent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999999;
+    background-image: linear-gradient(
+      145deg,
+      #bee9ff 0%,
+      #99dbff 25%,
+      #ffc4f1 50%,
+      #99dbff 75%,
+      #bee9ff 100%
+    );
+    background-size: 400% 400%;
+    animation: bgmove 20s linear 0s infinite alternate forwards;
+  }
+}
+@keyframes bgmove {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 100%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 .aboutheader {