CSS3饼状图loading旋转动画

CSS代码：

.wrap { width: 64px; height: 64px; position: relative; }.outer { position: absolute; width: 100%; height: 100%; background: url(icon-spin-s.png) no-repeat; animation: spin 800ms infinite linear; }.inner, .inner2 { position: absolute; width: 38px; height: 38px; border-radius: 40px; overflow: hidden; left: 13px; top: 13px; }.inner { opacity: 1; background-color: #89abdd; animation: second-half-hide 1.6s steps(1, end) infinite; }.inner2 { opacity: 0; background-color: #4b86db; animation: second-half-show 1.6s steps(1, end) infinite; }.spiner, .filler, .masker { position: absolute; width: 50%; height: 100%; }.spiner { border-radius: 40px 0 0 40px; background-color: #4b86db; transform-origin: right center; animation: spin 800ms infinite linear; left: 0; top: 0; }.filler { border-radius: 0 40px 40px 0; background-color: #4b86db; animation: second-half-hide 800ms steps(1, end) infinite; left: 50%; top: 0; opacity: 1; }.masker { border-radius: 40px 0 0 40px; background-color: #89abdd; animation: second-half-show 800ms steps(1, end) infinite; left: 0; top: 0; opacity: 0; }.inner2 .spiner, .inner2 .filler { background-color: #89abdd; }.inner2 .masker { background-color: #4b86db; }@keyframes spin {  0%   { transform: rotate(360deg); }  100% { transform: rotate(0deg); }}@keyframes second-half-hide {  0%        { opacity: 1; }  50%, 100% { opacity: 0; }}@keyframes second-half-show {  0%        { opacity: 0; }  50%, 100% { opacity: 1; }}

HTML代码：

<div class="wrap">    <div class="outer"></div>    <div class="inner">        <div class="spiner"></div>        <div class="filler"></div>        <div class="masker"></div>    </div>    <div class="inner2">        <div class="spiner"></div>        <div class="filler"></div>        <div class="masker"></div>    </div></div>

设计师制作的Gif - 27.8k

演示网站：http://codepen.io/AMKohn/pen/EKJHf