首页 > 代码库 > css3圆形进度条
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 Binhttp://jsbin.comCopyright (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>
css3圆形进度条