Html
    Css
    Js

    
                        
.loading {
	margin:100px auto;
	width:100px;
	height:100px;
	border:10px solid #333333;
	border-bottom:#aaa 10px solid;
	border-radius:50%;
	animation:load 1.1s infinite linear;
	-webkit-animation:load 1.1s infinite linear;
	-moz-animation:load 1.1s infinite linear;
	-o-animation:load 1.1s infinite linear;
}
@keyframes load {
	from {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}
}@-webkit-keyframes load {
	from {
	-webkit-transform:rotate(0deg);
}
to {
	-webkit-transform:rotate(360deg);
}
}@-moz-keyframes load {
	from {
	-moz-transform:rotate(0deg);
}
to {
	-moz-transform:rotate(360deg);
}
}@-o-keyframes load {
	from {
	-o-transform:rotate(0deg);
}
to {
	-o-transform:rotate(360deg);
}
}

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

css3简单loading效果

简单loading效果 可直接在页面加载时调用 css兼容已完善 大小颜色直接修改即可

0