拼命加载中...

Gridea NexT添加仿Butterfly加载动画

Hexo的Butterfly主题有一个很好看的加载动画,现在我把它添加到Gridea NexT主题(博主已实现),并写一个教程。如果这篇文章对你有帮助,还请打赏支持一下🙏!

  • 实现效果请参考本站。

Gridea主题目录 > NexT > templates > _blocks 目录下创建 loading.ejs 文件。

※特别说明:
如果你之前曾按照“Gridea NexT主题优化”中的教程创建过loading.ejs文件,你可以直接在 loading.ejs 文件末尾添加代码。
如果你使用其他主题(包含其他平台的主题),请在所有页面的 </head> 前添加代码(建议添加在模板文件中)。

loading.ejs 文件中添加下面的代码:

<!--网站加载动画开始-->
<style>
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  position: fixed;
  z-index: 10000;
  width: 50%;
  height: 100%;
  background-color: #37474f;
  transition: all 0.5s;
}

#loading-box .loading-right-bg {
  right: 0;
}

#loading-box>.spinner-box {
  position: fixed;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#loading-box .spinner-box .configure-border-1 {
  position: absolute;
  padding: 3px;
  width: 115px;
  height: 115px;
  background: #ffab91;
  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

#loading-box .spinner-box .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-box .spinner-box .loading-word {
  position: absolute;
  color: #ffffff;
  font-size: 16px;
}

#loading-box .spinner-box .configure-core {
  width: 100%;
  height: 100%;
  background-color: #37474f;
}

div.loaded div.loading-left-bg {
  transform: translate(-100%, 0);
}

div.loaded div.loading-right-bg {
  transform: translate(100%, 0);
}

div.loaded div.spinner-box {
  display: none !important;
}

@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);
  }
}
</style>

<div id="loading-box">
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
      <div class="configure-border-1">
        <div class="configure-core"></div>
      </div>
      <div class="configure-border-2">
        <div class="configure-core"></div>
      </div>
      <div class="loading-word">拼命加载中...</div>
    </div>
</div>

<script>
    $(document).ready(function () {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    })
</script>

<!--网站加载动画结束-->
  • 如果你的情况符合“特别说明”中所说的,那么以下操作你不需要进行。

分别打开 Gridea主题目录 > NexT > templates 目录下的 archives.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 文件,在 </head> 上方另起一行并添加下面代码:

<%- include('./_blocks/loading') %>

本文由博主原创,请尊重他人的劳动成果,转载请务必保留原文链接并注明来源,谢谢合作!如果这篇文章对你有帮助,还请打赏支持一下🙏!


---------- 本文到此结束 感谢您的阅读 ----------

赞赏



评论说明
1. 您需要先登录/注册后才能提交评论;
2. 请使用 简体中文 发表评论;
3. 若表情无法加载,请刷新页面重试;
4. 评论智能过滤已开启,请勿提交无意义评论;
5. 评论审核已开启,您的评论将在审核后显示,请勿重复提交评论,谢谢配合!