简单的CSS3 Loading动画

　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。

 

　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下：

　　

<style>
  .loading{margin:100px auto; width: 8em; height: 8em; position: relative;}
  .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center;
  }
  .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;}
  .left{ border-radius: 8em 0 0 8em;}
  .right{ border-radius: 0 8em 8em 0;}
  .left:after,.right:after{content:"";  position:absolute; display:block; width: 4em;height: 8em; background-color: white;border-radius: 8em 0 0 8em;background-color: red;}
  .right:after{content:"";  position:absolute; display:block;   border-radius: 0 8em 8em 0; }
</style>
<div class="loading">
  <div class="left"></div>
  <div class="right"></div>
  <div class="progress">85%</div>
</div>

View Code