U型进度条

今天同事说要做一个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的画笔，画曲线。并且把方法进行了封装。

代码很简单，就是定义路径，定义画笔，画曲线，保存，生成图中心文字

完整例子参考：点击我