CSS3圆形进度条动画特效

一款CSS3圆形进度条动画特效，四种颜色+四种进度比例，除了外圈的进度外，内圈还有一个灰色的描边，整体效果简洁又大气，喜欢的童鞋请收下吧。

分类：统计图 > 圆形百分比难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，先远程调用bootstrap样式文件，接着设置好页面各元素的样式，代码如下：

页面的body部分，四种不同的圆形百分比放在不同的div容器里面，代码如下：

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="progress blue">
          <span class="progress-left">
            <span class="progress-bar"></span>
          </span>
          <span class="progress-right">
            <span class="progress-bar"></span>
          </span>
          <div class="progress-value">90%</div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="progress yellow">
          <span class="progress-left">
            <span class="progress-bar"></span>
          </span>
          <span class="progress-right">
            <span class="progress-bar"></span>
          </span>
          <div class="progress-value">75%</div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="progress pink">
          <span class="progress-left">
            <span class="progress-bar"></span>
          </span>
          <span class="progress-right">
            <span class="progress-bar"></span>
          </span>
          <div class="progress-value">60%</div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="progress green">
          <span class="progress-left">
            <span class="progress-bar"></span>
          </span>
          <span class="progress-right">
            <span class="progress-bar"></span>
          </span>
          <div class="progress-value">85%</div>
        </div>
      </div>
    </div>
  </div>
</div>