css3圆形进度条

浏览数：99 / 时间：2015年06月09日

前几天在网上看到了一个css3的进度条，自己想了下。做了一个。

进度条由4层构成，最下面的一层表示初始状态，我用蓝色的圆形div表示，第二层到第四层用来做进度动画用，第二层的圆是由一个宽高都为0的div，加上border和圆角做出来的，初始状态的时候，border的颜色全都是透明，旋转45度。第三层是一个1/4圆，用来旋转用的，当这个圆开始旋转的时候，第二层的圆的border-top-color变成最终的颜色，我用的紫色，当这个圆转到90度的时候，第二层的圆的右边框变为紫色。由于有动画效果，在0%的时候右边框是透明的，25%的时候变成了紫色，中间有个颜色变化过程，这不是我要的，应该有的效果是25%的时候，右边框瞬间变成紫色，为了达到这个效果，可以在0%到24%之间的时候都是上边框的颜色为紫色，24%到25%之间的时间很短，看不出逐渐变颜色。

还有一个问题就是1/4圆从旋转270度到360度的时候，在大圆的右边1/4圆的区域里面会出现小圆，实际效果是小圆从1/4的圆变小到没有，也就是扇形区域变小，为了解决这个问题就加入第四个圆，这个圆和小圆一样大，位置一样，就只有颜色不一样，颜色为紫色，这个圆刚开始隐藏，等小圆旋转到25%进度的时候显示，因为这个时候第二个圆的上边框已经出现，并且和第四个圆颜色一样，所以看不出第四个圆出现。

最后一个问题就是当动画结束的时候，会一瞬间变回原来的颜色，我想要的效果是最后整个圆是紫色的，而不会变回蓝色，这个就设置一下各个动画的animation-fill-mode:forwards;让动画结束的时候的状态为动画结束的状态，而不是开始的状态。

代码如下，我设置的是无限次，把infinite改成数字可以换成对应的循环次数。代码是在jsbin上写的，css3的属性只写了webkit的前缀。http://jsbin.com/xovok/11/watch?html,css,output

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by wuxiandiejis (http://jsbin.com/xovok/7/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body,div{margin:0;padding:0}
.outer{
width:0;
heigh:0;
border-radius:50%;
border:100px solid skyblue;
position:relative;
margin:50px auto;
}
.inner{
width:0;
height:0;
position:absolute;
top:-100px;
left:-100px;
border:100px solid transparent;
border-radius:50%;
-webkit-transform:rotate(45deg);
-webkit-animation:change_color 5s infinite linear forwards;
}
.rotate,.hide{
width:100px;
height:100px;
position:absolute;
top:-100px;
left:0;
border-top-right-radius:100px;
position:absolute;
top:-100px;
left:0;
}
.rotate{
background:skyblue;
background:skyblue;-webkit-transform-origin:0 100%;
-webkit-animation:move 5s infinite linear;
}
.hide{
background:purple;
visibility:hidden;
-webkit-animation:hide 5s infinite linear forwards;
}
/*旋转动画*/
@-webkit-keyframes move{
   0%{
       -webkit-transform:rotate(0deg);
   }
   100%{-webkit-transform:rotate(360deg);}
}
/*第二层变颜色*/
@-webkit-keyframes change_color{
   0%{
      border-color:purple transparent transparent transparent;
    }
24%{border-color:purple transparent transparent transparent}
   25%{
      border-color:purple purple transparent transparent;
    }
   49%{
      border-color:purple purple transparent transparent;
    }
   50%{border-color:purple purple purple transparent}
   74%{border-color:purple purple purple transparent}
    75%{
      border-color:purple;
    }
    100%{border-color:purple}
}
@-webkit-keyframes hide{
0%{visibility:hidden}
24%{visibility:hidden}
25%{visibility:visible}
100%{visibility:visible}
}

</style>
</head>
<body>
    <div class="outer">
      <div class="inner"></div>
      <div class="rotate"></div>
      <div class="hide"></div>
    </div>
</body>
</html>