1 写轮眼加载动画

  • 这边先介绍如何引入本博客的加载动画，直接复制就能实现，适用于代码二次开发能力不强的用户

  • “授人以鱼不如授人以渔"，后面会教大家如何引入自己想要的加载动画

1.1 基本引入

  • 将以下代码复制进layouts/partials/head/custom.html(文件不存在则自行创建)

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spinner 1s linear infinite;
}

1.2 动画首次加载

  • 每次切换页面都播放一次加载动画，这种看个人喜欢。

  • 我个人是不太喜欢的，我只希望第一次打开这页面的时候加载一下就好

1.2.1 PJAX

  • 如果你博客引入了PJAX功能，基本是不会出现这情况了。因为页头页脚一般不是PJAX会刷新的地方，所以页面切换时不会重复执行加载动画脚本

  • 想了解PJAX可以去查看【Hugo】PJAX实现无刷新加载页面

<style>
    .loading {
        ...
        display: none;
    }
</style>

  • (2) 修改initLoading方法

<script>
    function initLoading() {
        const isFirstVisit = !sessionStorage.getItem('visited');
        if (isFirstVisit) {
            let loading = document.querySelector(".loading");
            loading.style.display = "flex";
            document.addEventListener('DOMContentLoaded', function() {
                // 执行加载完成动画
                loadFinish();
                // 延迟1.5s，待加载完成动画执行结束
                setTimeout(() => {
                    loading.style.display = "none";
                }, 1500)
                sessionStorage.setItem('visited', 'true');
            });
        }
    }
</script>

  • (3) 这样就只有首次进入此网站时才播放加载动画，页面关闭后重新进入才再次播放加载动画

2 自定义加载动画

2.1 基本引入

  • (1) 前往UIverse，寻找自己喜欢的加载动画

  • (2) 将加载动画的html，css分别复制到下面的模板，然后将模板内容复制到layouts/partials/head/custom.html

<div class="loading">
    <!-- html内容 -->
</div>

<style>
    .loading {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: #f5f5fa;
    }
	
    /* css内容 */
</style>

<script>	
    function initLoading() {
        let loading = document.querySelector(".loading");
        document.addEventListener('DOMContentLoaded', function() {
            // 本地页面加载速度快，可自行使用setTimeout()来进行延迟，体验加载动画效果
            loading.style.display = "none";
        });
    }

    initLoading();
</script>

这样就能实现最基本的加载动画效果

2.2 样式修改

  • 因为每个人的加载动画都不一致，这边只分享一下可能会用到的css样式，实际情况还需自己自行适配

  • 也可以参考上面的写轮眼动画的写法，来模仿写法

  • CSS样式

/**
 * 可能会用到的CSS
 */
{
    /* 整体修改元素大小(大于1放大, 小于1缩小) */
    zoom: 1.0;

    /* 开始动画播放 */
    animation-play-state: running;

    /* 暂停动画播放 */
    animation-play-state: paused;

    /* 元素居中(flex布局) */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 元素隐藏 */
    display: none;

    /* 定义动画 */
    @keyframes 动画名 {
        0% {}
        进度% {}
        100% {}
    }

    /* 执行动画 */
    animation: 动画名 时间;
}