Html
    Css
    Js

    
                        
/* loading */
#loading {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	color:white;
	background:#5fc4d6;
	font-size:1em;
	text-align:center;
	overflow:hidden;
	z-index:9999;
}
.spinner {
	margin:0 auto;
	width:60px;
	height:60px;
	position:relative;
	top:40%;
}
.container1 > div,.container2 > div,.container3 > div {
	width:15px;
	height:15px;
	background-color:#fff;
	border-radius:100%;
	position:absolute;
	-webkit-animation:bouncedelay 1.2s infinite ease-in-out;
	animation:bouncedelay 1.2s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.spinner .spinner-container {
	position:absolute;
	width:100%;
	height:100%;
}
.container2 {
	-webkit-transform:rotateZ(45deg);
	transform:rotateZ(45deg);
}
.container3 {
	-webkit-transform:rotateZ(90deg);
	transform:rotateZ(90deg);
}
.circle1 {
	top:0;
	left:0;
}
.circle2 {
	top:0;
	right:0;
}
.circle3 {
	right:0;
	bottom:0;
}
.circle4 {
	left:0;
	bottom:0;
}
.container2 .circle1 {
	-webkit-animation-delay:-1.1s;
	animation-delay:-1.1s;
}
.container3 .circle1 {
	-webkit-animation-delay:-1.0s;
	animation-delay:-1.0s;
}
.container1 .circle2 {
	-webkit-animation-delay:-0.9s;
	animation-delay:-0.9s;
}
.container2 .circle2 {
	-webkit-animation-delay:-0.8s;
	animation-delay:-0.8s;
}
.container3 .circle2 {
	-webkit-animation-delay:-0.7s;
	animation-delay:-0.7s;
}
.container1 .circle3 {
	-webkit-animation-delay:-0.6s;
	animation-delay:-0.6s;
}
.container2 .circle3 {
	-webkit-animation-delay:-0.5s;
	animation-delay:-0.5s;
}
.container3 .circle3 {
	-webkit-animation-delay:-0.4s;
	animation-delay:-0.4s;
}
.container1 .circle4 {
	-webkit-animation-delay:-0.3s;
	animation-delay:-0.3s;
}
.container2 .circle4 {
	-webkit-animation-delay:-0.2s;
	animation-delay:-0.2s;
}
.container3 .circle4 {
	-webkit-animation-delay:-0.1s;
	animation-delay:-0.1s;
}
@-webkit-keyframes bouncedelay {
	0%,80%,100% {
	-webkit-transform:scale(0.0)
}
40% {
	-webkit-transform:scale(1.0)
}
}@keyframes bouncedelay {
	0%,80%,100% {
	transform:scale(0.0);
	-webkit-transform:scale(0.0);
}
40% {
	transform:scale(1.0);
	-webkit-transform:scale(1.0);
}
}

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

css3动画loading

0