效果图

Web加载动画效果

实现思路

比较简单,一个div,绝对布局,百分百的宽高,里面一个图片居中.

加载的动画图片需要自己设置

使用方法

代码在下方

先在当前页面引入js文件,然后直接使用 loading.show() 来显示加载动画

使用 loading.hide() 来隐藏加载动画

代码如下

使用到了 jquery

var loading;
$(document).ready(function () {
    var loadingDiv = document.createElement("div");
    loadingDiv.style.position = "absolute";
    loadingDiv.style.top = 0;
    loadingDiv.style.width = "100%";
    loadingDiv.style.height = "100%";
    loadingDiv.style.background = "rgba(0,0,0,0.6)";
    loadingDiv.style.zIndex = 9999;
    var loadingImg = document.createElement("img");
    loadingImg.src = "动图路径";
    loadingImg.className = "loadingImg";
    loadingDiv.appendChild(loadingImg);
    var style = document.createElement("style");
    style.type = "text/css";
    style.innerHTML = ".loadingImg {position: absolute; top: 50%; left: 50%; width: 20%; transform: translate(-50%, -50%);}" +
            "@media screen and (max-width: 720px) { .loadingImg {width : 50%;}}";
    document.head.appendChild(style);
    loading = {
        show : function () {
            document.body.appendChild(loadingDiv);            
        },
        hide : function () {
            document.body.removeChild(loadingDiv);
        }
    }
});

不使用 jQuery

var loading;
var loadingDiv = document.createElement("div");
loadingDiv.style.position = "absolute";
loadingDiv.style.top = 0;
loadingDiv.style.width = "100%";
loadingDiv.style.height = "100%";
loadingDiv.style.background = "rgba(0,0,0,0.6)";
loadingDiv.style.zIndex = 9999;
var loadingImg = document.createElement("img");
loadingImg.src = "图片路径";
loadingImg.className = "loadingImg";
loadingDiv.appendChild(loadingImg);
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = ".loadingImg {position: absolute; top: 50%; left: 50%; width: 20%; transform: translate(-50%, -50%);}" +
        "@media screen and (max-width: 720px) { .loadingImg {width : 50%;}}";
document.head.appendChild(style);
loading = {
    show : function () {
        document.body.appendChild(loadingDiv);            
    },
    hide : function () {
        document.body.removeChild(loadingDiv);
    }
}