Html
    Css
    Js

    
                        
.loading {
	background:#000;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:99999
}
.loadingBox {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	text-align:center;
	width:100%;
}
.loadingBox p,span[class*=l-] {
	text-align:center;
	font:30px/40px arial
}
span[class*=l-] {
	height:30px;
	width:30px;
	display:inline-block;
	margin:24px 4px;
	color:#fff;
	border-radius:100%;
	-webkit-border-radius:100%;
	animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both;
	-webkit-animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both;
}
@-webkit-keyframes loader {
	0% {
	-webkit-transform:translate3d(-60px,0,0);
	transform:translate3d(-60px,0,0);
	opacity:0
}
25% {
	opacity:1
}
50% {
	-webkit-transform:translate3d(60px,0,0);
	transform:translate3d(60px,0,0);
	opacity:0;
}
100% {
	opacity:0
}
}@keyframes loader {
	0% {
	-webkit-transform:translate3d(-60px,0,0);
	transform:translate3d(-60px,0,0);
	opacity:0
}
25% {
	opacity:1
}
50% {
	-webkit-transform:translate3d(60px,0,0);
	transform:translate3d(60px,0,0);
	opacity:0
}
100% {
	opacity:0
}
}span.l-1 {
	-webkit-animation-delay:1.2s;
	animation-delay:1.2s;
	color:red
}
span.l-2 {
	-webkit-animation-delay:1s;
	animation-delay:1s
}
span.l-3 {
	-webkit-animation-delay:.8s;
	animation-delay:.8s
}
span.l-4 {
	-webkit-animation-delay:.6s;
	animation-delay:.6s
}
span.l-5 {
	-webkit-animation-delay:.4s;
	animation-delay:.4s;
	color:red
}
span.l-6 {
	-webkit-animation-delay:.2s;
	animation-delay:.2s
}
span.l-7 {
	-webkit-animation-delay:0s;
	animation-delay:0s
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

加载动画(原创)

加载动画 , 使用场景: 代码没有加载完成的加载页

0