纯css圆形进度条

1、纯css圆形进度条

需要用到H5中的新标签<progress>默认样式是这样的

而我们的目标是将它变为圆形

那么提供了一种思路，就是将它5变为宽高都为100px圆角为50px的圆形

但是遇到了第一个问题progress设置了border-radius: 50px没有任何变化

解决方案：在progress外套了一个跟它一样大的div给div设圆角和溢出

隐藏，然后就可以显示圆形啦！

第二个问题：进度条还是从左往右增加的，我们希望是从下往上增加的效果

解决方案：使用transform:rotate（-90deg）是progress逆时针旋转90度

第三个问题：progress本身自带的背景样式无法再progress{}中修改，这个是什么鬼边框

解决方案：最后让我找到了，要再伪类里改才会有效果progress{background: #fff;}，progress::-webkit-progress-bar { background: transparent; }//修改max值显示的背景区块，需要将bar伪类的背景设为透明后再在progress里修改

progress::-webkit-progress-value { background:#ff7d27; }//修改val值显示的背景区块

2、环形的css进度条

逻辑与上面相通，所以直接粘代码备份了

css部分：

progress{
width: 100px;
height: 100px;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
-o-transform:rotate(-90deg); /* Opera */
border: none;
background: #fff;
}
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background:#ff7d27; }
.box{
text-align: center;
width: 100px;
color: #666
}
.box_in{
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50px;
border:2px solid #ccc;
position: relative;
} 
.sum{
position: absolute;
top: 42px;
left: 38px;
} 

HTML部分

<div class="box">
<div class="box_in">
<progress value="50" max="100" "></progress>
<span class="sum">100</span>
</div>
<span>已完成：50</spqn>
</div>
</div>

效果图如下：

环形图只能显示成这样，这个形象中的环形图差距还是有点大的，但是试过几种方法暂时还未找到纯css显示环形图的方法