From 4b89a4e86f66fb48d458488ab39ff7472ced7d51 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Sat, 28 Aug 2021 14:18:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E8=BD=BD=E5=85=A5=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 98 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index b9f35c2b..2ffa15ba 100644
--- a/index.html
+++ b/index.html
@@ -25,47 +25,62 @@
                 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') { %>
@@ -91,9 +106,26 @@
     <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') { %>