Html
    Css
    Js

    
                        
body {
	background:#fff;
}
.pswp__preloader__icn {
	opacity:0.75;
	width:24px;
	height:24px;
	-webkit-animation:clockwise 500ms linear infinite;
	animation:clockwise 500ms linear infinite;
}

.pswp__preloader__cut {
	position:relative;
	width:12px;
	height:24px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
}
.pswp__preloader__donut {
	box-sizing:border-box;
	width:24px;
	height:24px;
	border:2px solid #000;
	border-radius:50%;
	border-left-color:transparent;
	border-bottom-color:transparent;
	position:absolute;
	top:0;
	left:0;
	background:none;
	margin:0;
	-webkit-animation:donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
	animation:donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
}
@-webkit-keyframes clockwise {
	0% {
	-webkit-transform:rotate(0deg)
}
100% {
	-webkit-transform:rotate(360deg)
}
}@keyframes clockwise {
	0% {
	transform:rotate(0deg)
}
100% {
	transform:rotate(360deg)
}
}@-webkit-keyframes donut-rotate {
	0% {
	-webkit-transform:rotate(0)
}
50% {
	-webkit-transform:rotate(-140deg)
}
100% {
	-webkit-transform:rotate(0)
}
}@keyframes donut-rotate {
	0% {
	transform:rotate(0)
}
50% {
	transform:rotate(-140deg)
}
100% {
	transform:rotate(0)
}
}body {
	margin:40px
}

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

纯CSS加载动画

支持原创,加油!

0