在

里面引入以下css文件和js文件即可实现

loading.css如下

.spinner {

width: 60px;

height: 60px;

background-image: linear-gradient(0deg,#8a76f6,#70cafe);

margin: 100px auto;

-webkit-animation: rotateplane 1.2s infinite ease-in-out;

animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

}

}

loading.js如下

//获取浏览器页面可见高度和宽度

var _PageHeight = document.documentElement.clientHeight,

_PageWidth = document.documentElement.clientWidth;

//计算loading框距离顶部和左部的距离(loading框的宽度为215px，高度为61px)

var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,

_LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;

//在页面未加载完毕之前显示的loading Html自定义内容

var _LoadingHtml = ‘

//呈现loading效果

document.write(_LoadingHtml);

//监听加载状态改变

document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果

function completeLoading() {

if (document.readyState == "complete") {

$("#loadingDiv").fadeOut(1500);

}

}