diff --git a/index.html b/index.html
index b9f35c2b..920da3be 100644
--- a/index.html
+++ b/index.html
@@ -25,75 +25,88 @@
                 background-color: snow;
             }
             .fantastic-admin-home .loading {
-                position: relative;
-                display: inline-block;
-                width: 1em;
-                height: 1em;
-                color: inherit;
-                vertical-align: middle;
-                pointer-events: none;
-                transform: scale(3);
+                height: 40px;
+                width: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-wrap: wrap;
             }
-            .fantastic-admin-home .loading::before,
-            .fantastic-admin-home .loading::after {
+            .fantastic-admin-home .square {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 20px;
+                width: 20px;
+            }
+            .fantastic-admin-home .square::before {
                 content: '';
-                display: block;
-                position: absolute;
-                background-color: currentColor;
-                left: 50%;
-                right: 0;
-                top: 0;
-                bottom: 50%;
-                box-shadow: -0.5em 0 0 currentColor;
-                animation: loading 1s linear infinite;
+                width: 10px;
+                height: 10px;
+                border-radius: 15%;
+                border: 3px solid #8c858f;
             }
-            .fantastic-admin-home .loading::after {
-                top: 50%;
-                bottom: 0;
-                animation-delay: 0.25s;
+            .fantastic-admin-home .loading.animate .square::before {
+                animation: square-to-dot-animation 1.2s linear;
             }
-            @keyframes loading {
-                0%,
-                100% {
-                    box-shadow: -0.5em 0 0 transparent;
-                    background-color: currentColor;
+            .fantastic-admin-home .loading.animate .square:nth-child(1)::before {
+                animation-delay: calc(100ms * 1);
+            }
+            .fantastic-admin-home .loading.animate .square:nth-child(2)::before {
+                animation-delay: calc(100ms * 2);
+            }
+            .fantastic-admin-home .loading.animate .square:nth-child(3)::before {
+                animation-delay: calc(100ms * 3);
+            }
+            .fantastic-admin-home .loading.animate .square:nth-child(4)::before {
+                animation-delay: calc(100ms * 4);
+            }
+            @keyframes square-to-dot-animation {
+                15%,
+                55% {
+                    border-radius: 100%;
+                    width: 0;
+                    height: 0;
+                    margin: 5px;
+                    border-width: 5px;
                 }
-                50% {
-                    box-shadow: -0.5em 0 0 currentColor;
-                    background-color: transparent;
+                70% {
+                    border-radius: 15%;
+                    width: 10px;
+                    height: 10px;
+                    margin: initial;
+                    border-width: 3px;
                 }
             }
             .fantastic-admin-home .text {
                 font-size: 24px;
-                margin-top: 50px;
+                margin-top: 20px;
             }
         </style>
-        <% if (appMode == 'example') { %>
-            <script>
-                var _hmt = _hmt || [];
-                (function() {
-                    if (location.origin.includes('gitee')) {
-                        var hm = document.createElement("script");
-                        hm.src = "https://hm.baidu.com/hm.js?ba0ee7b31f404b7dc10bfcd8bdc7183d";
-                        var s = document.getElementsByTagName("script")[0];
-                        s.parentNode.insertBefore(hm, s);
-                    }
-                    if (location.origin.includes('github')) {
-                        var hm = document.createElement("script");
-                        hm.src = "https://hm.baidu.com/hm.js?d07a64f7a02cd5e9c01e1b36948ac4a5";
-                        var s = document.getElementsByTagName("script")[0];
-                        s.parentNode.insertBefore(hm, s);
-                    }
-                })();
-            </script>
-        <% } %>
     </head>
     <body>
         <div id="app">
             <div class="fantastic-admin-home">
-                <div class="loading"></div>
+                <div class="loading">
+                    <div class="square"></div>
+                    <div class="square"></div>
+                    <div class="square"></div>
+                    <div class="square"></div>
+                </div>
                 <div class="text"><%= title %>载入中…</div>
             </div>
+            <script>
+                const Loading = document.querySelector('.loading')
+                Loading.classList.add('animate')
+                Loading.addEventListener('animationend', function() {
+                    setTimeout(function() {
+                        Loading.classList.remove('animate')
+                    }, 600)
+                    setTimeout(function() {
+                        Loading.classList.add('animate')
+                    }, 1000)
+                })
+            </script>
         </div>
         <script type="module" src="/src/main.js"></script>
         <% if (debugTool == 'eruda') { %>