.spinner {
	/*半透明蓝色的圆弧，形成进度条的背景，透明的半圆弧和蓝色的半圆弧交替旋转构成进度条*/  
                font-size:20px;
	width:1em;
	height:1em;
	border-radius:50%;
	box-shadow:inset 0 0 0 .1em rgba(58,168,237,.2);
}
.spinner i {
	/*创造了一个透明矩形的一半*/  
                position:absolute;
	width:1em;
	height:1em;
	clip:rect(0,1em,1em,.5em);
	animation:spinner-circle-clipper 1s ease-in-out infinite;
}
@keyframes spinner-circle-clipper {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(180deg);
}
}.spinner i:after {
	/*l蓝色的半圆弧*/  
                position:absolute;
	clip:rect(0,1em,1em,.5em);
	width:1em;
	height:1em;
	content:'';
	animation:spinner-circle 1s ease-in-out infinite;
	border-radius:50%;
	box-shadow:inset 0 0 0 .1em #3aa8ed;
}
@keyframes spinner-circle {
	0% {
	transform:rotate(-180deg);
}
100% {
	transform:rotate(180deg);
}
}