diff --git a/templates/qnloft/index.php b/templates/qnloft/index.php
index 16ab873..d24bc9f 100644
--- a/templates/qnloft/index.php
+++ b/templates/qnloft/index.php
@@ -7,7 +7,8 @@
         <?php echo $site['title']; ?> -
         <?php echo $site['subtitle']; ?>
     </title>
-    <link rel="shortcut icon" href="https://obsidian-img-use.oss-cn-beijing.aliyuncs.com/browser-img/qnloft-blog-favicon.png">
+    <link rel="shortcut icon"
+        href="https://obsidian-img-use.oss-cn-beijing.aliyuncs.com/browser-img/qnloft-blog-favicon.png">
     <meta name="keywords" content="<?php echo $site['keywords']; ?>" />
     <meta name="description" content="<?php echo $site['description']; ?>" />
     <link rel="stylesheet" id="block-library-css" href="templates/qnloft/assets/css/block-library.min-5.6.2.css"
@@ -77,6 +78,63 @@
 </head>
 
 <body class="io-grey-mode">
+    <div id="loading">
+        <style>
+            .loader {
+                width: 250px;
+                height: 50px;
+                line-height: 50px;
+                text-align: center;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-family: helvetica, arial, sans-serif;
+                font-weight: 900;
+                color: #07C160;
+                letter-spacing: 0.2em
+            }
+
+            .loader::before,
+            .loader::after {
+                content: "";
+                display: block;
+                width: 15px;
+                height: 15px;
+                background: #07C160;
+                position: absolute;
+                animation: load .7s infinite alternate ease-in-out
+            }
+
+            .loader::before {
+                top: 0
+            }
+
+            .loader::after {
+                bottom: 0
+            }
+
+            @keyframes load {
+                0% {
+                    left: 0;
+                    height: 30px;
+                    width: 15px
+                }
+
+                50% {
+                    height: 8px;
+                    width: 40px
+                }
+
+                100% {
+                    left: 235px;
+                    height: 30px;
+                    width: 15px
+                }
+            }
+        </style>
+        <div class="loader"><?php echo $site['title']; ?></div>
+    </div>
     <div class="page-container">
         <!-- 左侧 -->
         <div id="sidebar" class="sticky sidebar-nav fade animate-nav mini-sidebar" style="width: 60px">
@@ -96,9 +154,10 @@
                             <?php } ?>
                         </a>
                         <a href="" class="logo-collapsed">
-                            <img src="templates/qnloft/assets/images/logos/qnLogo.png" height="40" class="logo-light" alt="青柠炸机街">
-                            <img src="templates/qnloft/assets/images/logos/qnLogo_dark.png" height="40" class="logo-dark d-none"
+                            <img src="templates/qnloft/assets/images/logos/qnLogo.png" height="40" class="logo-light"
                                 alt="青柠炸机街">
+                            <img src="templates/qnloft/assets/images/logos/qnLogo_dark.png" height="40"
+                                class="logo-dark d-none" alt="青柠炸机街">
                         </a>
                     </div>
                 </div>
