标签：
今天同事说要做一个U型进度条的效果。
本打算上网找一个，结果找了一个纯CSS3打造的，不过最坑人的是他把进度条从1到100，挨个设置了CSS属性。
这不得活活累死宝宝~~~~~~~~~~~~~~。
于是我就用Less写了一个简单的，主要是封装了循环，生成了100个属性。封装循环的代码如下
@angle: 3.6deg; .loop(@counter) when (@counter < 100) { .loop((@counter + 1)); // 递归调用自身 .progress-@{counter} { background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(@angle*@counter+90deg, #fffde8 50%, #5d6771 50%, #5d6771); &:before{ transform: rotate(@angle*@counter) translate(0, -72.5px); } b:after{ content: "@{counter}%"; } } } .loop(0); // 调用循环
这样就生成了100个属性。完整例子参考：点击我
然后这个less这种做完了，想到用js+h5，也可以做一个类似的。
主要是用canvas的画笔，画曲线。并且把方法进行了封装。
代码很简单，就是定义路径，定义画笔，画曲线，保存，生成图中心文字
完整例子参考：点击我
标签：
原文地址：http://www.cnblogs.com/chenxygx/p/5001969.html
