?

今天同事說要做一個(gè)U型進(jìn)度條的效果。

本打算上網(wǎng)找一個(gè)，結(jié)果找了一個(gè)純CSS3打造的，不過最坑人的是他把進(jìn)度條從1到100，挨個(gè)設(shè)置了CSS屬性。

這不得活活累死寶寶~~~~~~~~~~~~~~。

于是我就用Less寫了一個(gè)簡(jiǎn)單的，主要是封裝了循環(huán)，生成了100個(gè)屬性。封裝循環(huán)的代碼如下

@angle: 3.6deg; .loop(@counter) when (@counter < 100) {.loop((@counter + 1)); // 遞歸調(diào)用自身.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); // 調(diào)用循環(huán)

這樣就生成了100個(gè)屬性。完整例子參考：點(diǎn)擊我

---

然后這個(gè)less這種做完了，想到用js+h5，也可以做一個(gè)類似的。

主要是用canvas的畫筆，畫曲線。并且把方法進(jìn)行了封裝。

代碼很簡(jiǎn)單，就是定義路徑，定義畫筆，畫曲線，保存，生成圖中心文字

完整例子參考：點(diǎn)擊我

?

轉(zhuǎn)載于:https://www.cnblogs.com/chenxygx/p/5001969.html

總結(jié)

以上是生活随笔為你收集整理的U型进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。