Web 页面加载动画

Web 页面加载动画

在 Web 开发中，通常会需要在页面中添加加载动画，以减少用户等待页面加载的焦虑感。下面介绍一个常用的页面加载动画的实现方法，同时介绍其 CSS 和 JavaScript 代码。

CSS 代码

CSS 代码定义了加载动画的样式。其中，.loader 类定义了加载动画元素的基本样式，.icon 类定义了加载动画的图标样式。

/* loader.css */
.loader{
    display:none;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
}
.loader .icon{
    border: 5px solid rgba(60, 179, 113, 0.2);
    border-top-color: #3cb371;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%) rotate(0deg);
}

@keyframes spin {
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}

JavaScript 代码

JavaScript 代码定义了加载动画的行为。其中，createLoader 函数创建了加载动画元素；showLoader 和 hideLoader 函数用于显示和隐藏加载动画。

// loader.js
var Loader = {

    loader:null,

    createLoader(){
        // 创建加载器元素
        this.loader = document.createElement('div');
        this.loader.classList.add('loader');

        const icon = document.createElement('div');
        icon.classList.add('icon');

        this.loader.appendChild(icon);

        // 将加载器元素添加到页面中
        window.document.body.appendChild(this.loader);
    },

    showLoader() {

        if(this.loader === null){
            this.createLoader();
        }

        this.loader.style.display = 'block';
    },

    hideLoader(){
        this.loader.style.display = 'none';
    }
};

用法

使用时，需要在 HTML 页面中引入 loader.css 和 loader.js，之后通过 Loader.showLoader() 和 Loader.hideLoader() 函数来显示和隐藏加载动画。

<!-- 用法 -->
<link rel="stylesheet" href="static/loader/loader.css">
<script src="static/loader/loader.js"></script>
<script>

		Loader.showLoader(); // 显示加载动画
		Loader.hideLoader(); // 隐藏加载动画

</script>

实现原理

在 JavaScript 中，创建一个 div 元素，并设置其样式为加载动画样式；在页面加载时，将该元素添加到页面中；需要显示加载动画时，将元素的 display 属性设置为 block 即可。

注意事项

• 为了保证动画效果，需保证 CSS 文件能够成功加载；
• 为了保证加载动画能够顺利显示，需将 JS 文件放在 HTML 页面的 body 标签中。