From fe6bb1da0939a9e963a2a4de95505916ebb79f44 Mon Sep 17 00:00:00 2001 From: bisnsh Date: Wed, 13 Aug 2025 13:56:27 +0800 Subject: [PATCH] add preloader --- _config.butterfly.yml | 2 +- .../includes/loading/fullpage-loading.pug | 55 +++----- .../layout/includes/loading/index.pug | 12 +- .../butterfly/source/css/_layout/loading.styl | 128 ++++++------------ themes/butterfly/source/css/style.css | 7 +- 5 files changed, 71 insertions(+), 133 deletions(-) diff --git a/_config.butterfly.yml b/_config.butterfly.yml index 240b402..3070f75 100644 --- a/_config.butterfly.yml +++ b/_config.butterfly.yml @@ -790,7 +790,7 @@ mask: # Loading Animation preloader: - enable: false + enable: true # source # 1. fullpage-loading # 2. pace (progress bar) diff --git a/themes/butterfly/layout/includes/loading/fullpage-loading.pug b/themes/butterfly/layout/includes/loading/fullpage-loading.pug index 2cea198..9aa9296 100644 --- a/themes/butterfly/layout/includes/loading/fullpage-loading.pug +++ b/themes/butterfly/layout/includes/loading/fullpage-loading.pug @@ -1,42 +1,23 @@ -#loading-box - .loading-left-bg - .loading-right-bg - .spinner-box - .configure-border-1 - .configure-core - .configure-border-2 - .configure-core - .loading-word= _p('loading') +#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') + .loading-bg + div.loading-img + .loading-image-dot script. - (()=>{ - const $loadingBox = document.getElementById('loading-box') - const $body = document.body - const preloader = { - endLoading: () => { - if ($loadingBox.classList.contains('loaded')) return - $body.style.overflow = '' - $loadingBox.classList.add('loaded') - }, - initLoading: () => { - $body.style.overflow = 'hidden' - $loadingBox.classList.remove('loaded') - } - } + const preloader = { + endLoading: () => { + document.body.style.overflow = 'auto'; + document.getElementById('loading-box').classList.add("loaded") + }, + initLoading: () => { + document.body.style.overflow = ''; + 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') - btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end') - } - })() \ No newline at end of file + if (!{theme.pjax && theme.pjax.enable}) { + document.addEventListener('pjax:send', () => { preloader.initLoading() }) + document.addEventListener('pjax:complete', () => { preloader.endLoading() }) + } \ No newline at end of file diff --git a/themes/butterfly/layout/includes/loading/index.pug b/themes/butterfly/layout/includes/loading/index.pug index 6a6facc..f585d78 100644 --- a/themes/butterfly/layout/includes/loading/index.pug +++ b/themes/butterfly/layout/includes/loading/index.pug @@ -1,5 +1,7 @@ -if theme.preloader.enable - if theme.preloader.source === 1 - include ./fullpage-loading.pug - else - include ./pace.pug \ No newline at end of file +if theme.preloader.source === 1 + include ./fullpage-loading.pug +else if theme.preloader.source === 2 + include ./pace.pug +else + include ./fullpage-loading.pug + include ./pace.pug \ No newline at end of file diff --git a/themes/butterfly/source/css/_layout/loading.styl b/themes/butterfly/source/css/_layout/loading.styl index 9f63e15..8670133 100644 --- a/themes/butterfly/source/css/_layout/loading.styl +++ b/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 - z-index: 1000 - width: 50% - height: 100% - background-color: var(--preloader-bg) + display: flex; + width: 100%; + height: 100%; + position: fixed; + background: #f0f0f2; + z-index: 1001; + opacity: 1; + transition: .3s; #loading-box - .loading-left-bg - @extend .loading-bg - - .loading-right-bg - @extend .loading-bg - right: 0 - - .spinner-box - position: fixed - z-index: 1001 - display: flex - justify-content: center - align-items: center - width: 100% - height: 100vh - - .configure-border-1 - position: absolute - padding: 3px - width: 115px - 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) - + .loading-img + width: 100px; + height: 100px; + border-radius: 50%; + margin: auto; + border: 4px solid #f0f0f2; + animation-duration: .3s; + animation-name: loadingAction; + animation-iteration-count: infinite; + animation-direction: alternate; + .loading-image-dot + width: 30px; + height: 30px; + background: #6bdf8f; + position: absolute; + border-radius: 50%; + border: 6px solid #fff; + top: 50%; + left: 50%; + transform: translate(18px, 24px); &.loaded - .loading-left-bg - transition: all .5s - transform: translate(-100%, 0) + .loading-bg + opacity: 0; + z-index: -1000; - .loading-right-bg - transition: all .5s - transform: translate(100%, 0) + @keyframes loadingAction + 0% { + opacity: 1; + } - .spinner-box - display: none - - @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) + 100% { + opacity: .4; + } diff --git a/themes/butterfly/source/css/style.css b/themes/butterfly/source/css/style.css index 78d41fc..abacfbe 100644 --- a/themes/butterfly/source/css/style.css +++ b/themes/butterfly/source/css/style.css @@ -358,4 +358,9 @@ text-align: center; } } -/* 主页文章列表图片宽度 */ \ No newline at end of file +/* 主页文章列表图片宽度 */ + +.loading-img { + background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center; + background-size: cover; +} \ No newline at end of file