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.ejs 、 index.ejs 、 post.ejs 、 tag.ejs 、 tags.ejs 、 friends.ejs 文件，在 </head> 上方另起一行并添加下面代码：