网页加载动画

闪动头像加载动画，替换自带的加载动画

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

diff

#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-bg
+   .loading-img
+   .loading-image-dot

script.
  (()=>{
    const $loadingBox = document.getElementById('loading-box')
    const $body = document.body
    const preloader = {
      endLoading: () => {
        $body.style.overflow = ''
        $loadingBox.classList.add('loaded')
      },
      initLoading: () => {
        $body.style.overflow = 'hidden'
        $loadingBox.classList.remove('loaded')
      }
    }

    preloader.initLoading()
    window.addEventListener('load', preloader.endLoading)
+   setTimeout(preloader.endLoading, 3000) // 3秒超时兜底

    if (!{theme.pjax && theme.pjax.enable}) {
      btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
      btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
    }
  })()

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

styl

if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
  #loading-box
    .loading-bg
      position: fixed
      display: flex
      z-index: 1000
      width: 100%
      height: 100%
      background-color: rgba(255, 255, 255, 0.9)
      transition: .3s

      .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
        background-color: #fff
        background: url(/img/butterfly-icon.png) no-repeat center center /* 你的头像链接 */
        background-size: cover

      .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-bg
        display: none

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

  [data-theme='dark']
    #loading-box
      .loading-bg
        background-color: rgba(0, 0, 0, 0.9)

开启source: 1加载动画

yml

# Loading Animation
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

网页加载动画 ​

网页加载动画