Html
    Css
    Js

    
                        
body{
	background-color:#63a1f4;
}

.loader1, .loader2, .loader3, .loader4, .loader5, .loader6, .loader7, .loader8, .loader9, .loader10, .loader11, .loader12,
.loader13, .loader14, .loader15, .loader16, .loader17, .loader18, .loader19, .loader20, .loader21, .loader22, .loader23, .loader24{
	box-sizing:border-box;
	width:100px;
	height:100px;
	position:absolute;
}

.loader1{
	left:100px;
	top:100px;
}

.loader2{
	left:300px;
	top:100px;
}

.loader3{
	left:500px;
	top:100px;
}

.loader4{
	left:700px;
	top:100px;
}

.loader5{
	left:900px;
	top:100px;
}

.loader6{
	left:1100px;
	top:100px;
}

.loader7{
	left:100px;
	top:300px;
}

.loader8{
	left:300px;
	top:300px;
}

.loader9{
	left:500px;
	top:300px;
}

.loader10{
	left:700px;
	top:300px;
}

.loader11{
	left:900px;
	top:300px;
}

.loader12{
	left:1100px;
	top:300px;
}

.loader13{
	left:100px;
	top:500px;
}

.loader14{
	left:300px;
	top:500px;
}

.loader15{
	left:500px;
	top:500px;
}

.loader16{
	left:700px;
	top:500px;
}

.loader17{
	left:900px;
	top:500px;
}

.loader18{
	left:1100px;
	top:500px;
}

.loader19{
	left:100px;
	top:700px;
}

.loader20{
	left:300px;
	top:700px;
}

.loader21{
	left:500px;
	top:700px;
}

.loader22{
	left:700px;
	top:700px;
}

.loader23{
	left:900px;
	top:700px;
}

.loader24{
	left:1100px;
	top:700px;
}

.container-A{
	position:absolute;
	width:75%;
	height:75%;
	left:12.5%;
	top:12.5%;
}

.container-B{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}

.spinner1, .spinner2, .spinner3{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}

.spinner1{
	animation : rotation0 4s infinite linear, resize1 4s infinite linear;
}

.spinner2{
	animation : rotation0 4s infinite linear, resize2 4s infinite linear;
}

.spinner3{
	animation : rotation0 6s infinite linear, resize3 6s infinite linear;
}

.hex0, .hex120, .hex240{
	position:absolute;
	box-sizing:border-box;
	width:100%;
	height:57.74%;
	left:0;
	top:21.13%;
	border-left:2px solid #fff;
	border-right:2px solid #fff;
}

.loader8 .hex0, .loader8 .hex120, .loader8 .hex240, .loader11 .hex0, .loader11 .hex120, .loader11 .hex240,
.loader14 .hex0, .loader14 .hex120, .loader14 .hex240, .loader17 .hex0, .loader17 .hex120, .loader17 .hex240{
	border-right:none;
}

.loader9 .hex0, .loader12 .hex0, .loader15 .hex0, .loader18 .hex0 {
	border:none;
}

.hex0{
	animation:rotation0 4s infinite linear;
}

.hex120{
	transform:rotate(120deg);
	animation:rotation120 4s infinite linear;
}

.hex240{
	transform:rotate(240deg);
	animation:rotation240 4s infinite linear;
}

@keyframes rotation0{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

@keyframes rotation120{
	0%{
		transform:rotate(120deg);
	}
	100%{
		transform:rotate(480deg);
	}
}

@keyframes rotation240{
	0%{
		transform:rotate(240deg);
	}
	100%{
		transform:rotate(600deg);
	}
}

@keyframes resize1{
	0%,50%,100%{
		width:100%;
		height:100%;
		left:0%;
		top:0%;
	}
	25%,75%{
		width:120%;
		height:120%;
		left:-10%;
		top:-10%;
	}
	12.5%,37.5%,62.5%,87.5%{
		width:70%;
		height:70%;
		left:15%;
		top:15%;
	}
}

@keyframes resize2{
	0%,33.33%,66.66%,100%{
		width:100%;
		height:100%;
		left:0%;
		top:0%;
	}
	16.66%,49.99%, 83.333%{
		width:70%;
		height:70%;
		left:15%;
		top:15%;
	}
}

@keyframes resize3{
	0%,16.66%,33.33%,50%,66.66%,83.33%,100%{
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	2.77%,19.44%,36.11%,52.77%,69.44%,86.11%{
		width:93.5%;
		height:93.5%;
		top:3.25%;
		left:3.25%;
	}
	5.55%,22.22%,38.88%,55.55%,72.22%,88.88%{
		width:84.4%;
		height:84.4%;
		top:7.8%;
		left:7.8%;
	}
	8.33%,25%,41.66%,58.33%,75%,91.66%{
		width:73.2%;
		height:73.2%;
		top:13.4%;
		left:13.4%;
	}
	11.11%,27.77%,44.44%,61.11%,77.77%,94.44%{
		width:84.4%;
		height:84.4%;
		top:7.8%;
		left:7.8%;
	}
	 13.88%,30.55%,47.22%,63.88%,80.55%,97.22%{
		width:93.5%;
		height:93.5%;
		top:3.25%;
		left:3.25%;
	}
}

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

纯cssloading,简单实用

1
      leavedog0
      2017/4/1 14:07:56