add preloader

_config.butterfly.yml

@@ -790,7 +790,7 @@ mask:
 
 # Loading Animation
 preloader:
-  enable: false
+  enable: true
   # source
   # 1. fullpage-loading
   # 2. pace (progress bar)

themes/butterfly/layout/includes/loading/fullpage-loading.pug

@@ -1,42 +1,23 @@
-#loading-box
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
-  .loading-left-bg
+  .loading-bg
-  .loading-right-bg
+    div.loading-img
-  .spinner-box
+    .loading-image-dot
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
 
 script.
-  (()=>{
-    const $loadingBox = document.getElementById('loading-box')
-    const $body = document.body
   const preloader = {
     endLoading: () => {
-        if ($loadingBox.classList.contains('loaded')) return
+      document.body.style.overflow = 'auto';
-        $body.style.overflow = ''
+      document.getElementById('loading-box').classList.add("loaded")
-        $loadingBox.classList.add('loaded')
     },
     initLoading: () => {
-        $body.style.overflow = 'hidden'
+      document.body.style.overflow = '';
-        $loadingBox.classList.remove('loaded')
+      document.getElementById('loading-box').classList.remove("loaded")
-      }
-    }
 
-    preloader.initLoading()
-
-    if (document.readyState === 'complete') {
-      preloader.endLoading()
-    } else {
-      window.addEventListener('load', preloader.endLoading)
-      document.addEventListener('DOMContentLoaded', preloader.endLoading)
-      // Add timeout protection: force end after 7 seconds
-      setTimeout(preloader.endLoading, 7000)
     }
+  }
+  window.addEventListener('load',()=> { preloader.endLoading() })
 
   if (!{theme.pjax && theme.pjax.enable}) {
-      btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
+    document.addEventListener('pjax:send', () => { preloader.initLoading() })
-      btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
+    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
   }
-  })()

themes/butterfly/layout/includes/loading/index.pug

@@ -1,5 +1,7 @@
-if theme.preloader.enable
+if theme.preloader.source === 1
-  if theme.preloader.source === 1
+  include ./fullpage-loading.pug
+else if theme.preloader.source === 2
+  include ./pace.pug
+else
   include ./fullpage-loading.pug
-  else
   include ./pace.pug

themes/butterfly/source/css/_layout/loading.styl

@@ -1,95 +1,45 @@
-if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
+if hexo-config('preloader')
   .loading-bg
-    position: fixed
+    display: flex;
-    z-index: 1000
+    width: 100%;
-    width: 50%
+    height: 100%;
-    height: 100%
+    position: fixed;
-    background-color: var(--preloader-bg)
+    background: #f0f0f2;
+    z-index: 1001;
+    opacity: 1;
+    transition: .3s;
 
   #loading-box
-    .loading-left-bg
+    .loading-img
-      @extend .loading-bg
+      width: 100px;
-
+      height: 100px;
-    .loading-right-bg
+      border-radius: 50%;
-      @extend .loading-bg
+      margin: auto;
-      right: 0
+      border: 4px solid #f0f0f2;
-
+      animation-duration: .3s;
-    .spinner-box
+      animation-name: loadingAction;
-      position: fixed
+      animation-iteration-count: infinite;
-      z-index: 1001
+      animation-direction: alternate;
-      display: flex
+    .loading-image-dot
-      justify-content: center
+      width: 30px;
-      align-items: center
+      height: 30px;
-      width: 100%
+      background: #6bdf8f;
-      height: 100vh
+      position: absolute;
-
+      border-radius: 50%;
-      .configure-border-1
+      border: 6px solid #fff;
-        position: absolute
+      top: 50%;
-        padding: 3px
+      left: 50%;
-        width: 115px
+      transform: translate(18px, 24px);
-        height: 115px
-        background: #ffab91
-        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
-
-      .configure-border-2
-        left: -115px
-        padding: 3px
-        width: 115px
-        height: 115px
-        background: rgb(63, 249, 220)
-        transform: rotate(45deg)
-        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
-
-      .loading-word
-        position: absolute
-        color: var(--preloader-color)
-        font-size: 16px
-
-      .configure-core
-        width: 100%
-        height: 100%
-        background-color: var(--preloader-bg)
-
     &.loaded
-      .loading-left-bg
+      .loading-bg
-        transition: all .5s
+        opacity: 0;
-        transform: translate(-100%, 0)
+        z-index: -1000;
 
-      .loading-right-bg
+  @keyframes loadingAction
-        transition: all .5s
+    0% {
-        transform: translate(100%, 0)
+        opacity: 1;
+    }
 
-      .spinner-box
+    100% {
-        display: none
+        opacity: .4;
-
+    }
-  @keyframes configure-clockwise
-    0%
-      transform: rotate(0)
-
-    25%
-      transform: rotate(90deg)
-
-    50%
-      transform: rotate(180deg)
-
-    75%
-      transform: rotate(270deg)
-
-    100%
-      transform: rotate(360deg)
-
-  @keyframes configure-xclockwise
-    0%
-      transform: rotate(45deg)
-
-    25%
-      transform: rotate(-45deg)
-
-    50%
-      transform: rotate(-135deg)
-
-    75%
-      transform: rotate(-225deg)
-
-    100%
-      transform: rotate(-315deg)

themes/butterfly/source/css/style.css

@@ -359,3 +359,8 @@
     }
 }
 /* 主页文章列表图片宽度 */
+
+.loading-img {
+  background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center;
+  background-size: cover;
+}