纯css loading

Html

Css


    Loading…

.container {
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	z-index:9;
	background:#ffffff;
}
@-moz-keyframes dots-loader {
	0% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
8.33% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
16.67% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
25% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
33.33% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
}
41.67% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
50% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
58.33% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
66.67% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
75% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
83.33% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
}
91.67% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
100% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
}@-webkit-keyframes dots-loader {
	0% {
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
8.33% {
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
16.67% {
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
25% {
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
33.33% {
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
}
41.67% {
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
50% {
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
58.33% {
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
66.67% {
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
75% {
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
83.33% {
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
}
91.67% {
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
100% {
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
}@keyframes dots-loader {
	0% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
8.33% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
16.67% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
25% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
33.33% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
}
41.67% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
50% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
58.33% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
66.67% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
75% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
	-webkit-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
83.33% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
	-webkit-box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae 14px 14px 0 7px;
}
91.67% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
100% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
}/*:not(:required) hides this rule from IE9 and below */
	.dots-loader:not(:required) {
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
	display:inline-block;
	width:7px;
	height:7px;
	background:transparent;
	border-radius:100%;
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-webkit-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	-moz-animation:dots-loader 5s infinite ease-in-out;
	-webkit-animation:dots-loader 5s infinite ease-in-out;
	animation:dots-loader 5s infinite ease-in-out;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
.hourglass {
	width:48px;
	height:96px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-24px;
	margin-top:-48px;
	background:#58498E;
	box-shadow:inset #58498E 0 0 0 0,inset #FFF 0 2em 0 0,inset #58498E 0 0 4em 0;
	animation:hourglass 1s linear infinite;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯css loading

代码描述：页面加载loading沙漏特效

更新时间：2021-09-25 23:01:26
纯css实现loading动画

1

最新

发表评论全部评论

暂时没有评论！

fasgvdz0

2021/12/15 18:41:42

的是非得失回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

年幼丧偶

相关代码

纯css loading

最新