SVG做圓環進度

2021-09-17 04:04:25 字數 1075 閱讀 1134

我們要實現的效果：

是不是有點感覺。。。哈哈

動態效果是用css3來實現的，，至於進度則是用js控制stroke-dasharray屬性實現的。。

**如下：

首先看下html結構

1143/1566加油開始99%
濾鏡效果

對於svg不熟悉的，先看下svg基本教程

接下來看下css樣式

.zh-rt-main


.zh-rt-main .zh-node


.zh-rt-main .zh-node:after


.zh-rt-main .zh-node .zh-name,


.zh-rt-main .zh-node .zh-percent-num


.zh-rt-main .zh-node-1


.zh-rt-main .zh-node-2


.zh-rt-main .zh-node-3


.zh-rt-main .zh-node-4


.zh-rt-main .zh-node-5


.zh-rt-main .zh-node-6


.zh-rt-main .zh-node-7


.zh-rt-main .zh-node-8


.zh-rt-main .zh-node-9


.zh-rt-main .zh-node-10


.zh-rt-main .zh-node-11


.zh-rt-main .zh-node-12
最後就js指令碼了，**不多，也很簡單，就是設定stroke-dasharray屬性

// 圓環進度條


function ringprocessbar() );


}ringprocessbar();
謝謝關注~

使用SVG實現圓環loading進度效果

當我們想實現這樣乙個loading效果，有這麼幾種選擇，第一種是使用canvas，第二種是借助css3的transform屬性。這兩種方法有乙個問題，在webkit核心的瀏覽器上存在毛邊。那麼如果只相容ie9 的瀏覽器，可以考慮使用svg svg的實現效果非常簡單 實現這個效果的關鍵因素在於stro...

使用svg畫圓環

專案中需要乙個圓形進度條，本著能省則省的原則，先去elementui上看了下，傻眼了，不一樣，ui直接否定了這個辦法。這個沒啥難點，cx,cy,r分別表示圓心 x,y 和半徑r,stroke width是圓的邊，stroke表示邊的顏色，fill表示整個圓的填充顏色。其實就是兩個同心圓，裡面的圓的邊...

圓環進度css

看效果先 參考 jquery圓環百分比進度條製作 css clip rect矩形剪裁功能及一些應用介紹 css clip rect幾個值含義示意例項頁面 clip rect下png通道透明下sprite定位例項頁面 clip rect剪裁效果預覽例項頁面 doctype html html lang...