【CSS3】用纯CSS实现加载中动画效果

<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>

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

/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
.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:
4000
rotate(-140deg) }
100% { transform: rotate(0) }
}

body{margin:40px}