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...