Animated Progress Circle

static progress circle

 SVG屬性解説

stroke-dasharray: 實線長度, 空白長度

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  //stroke-dasharray也可以寫在html的line屬性裡面
  stroke-dasharray: 6,15

Display
長度6長度6長度6長度6長度6長度15長度15長度15長度15

dash-strokearray也可以指定%數,100%等於整條線,所以
line
 stroke: black
 dash-strokearray: 100% 0%
 //這樣可以得到一條黑線
line
 stroke: black
 dash-strokearray: 0% 100%
 //這樣可以得到一條看不見的線

stroke-dashoffset: 偏移開始的位置

line裡面偏移數字等於x的減項

svg(viewbox="-50 -50 100 100")
 line(x1=-50,y1=0,x2=100,y2=0)
svg
 border: 1px solid #000
 width: 300px
 height: 300px
 line
  stroke: black
  stroke-dasharray: 6,15
  //向左縮了5
  //等於x1-5,x2-5
  stroke-dashoffset: 5

Display
↓ 向左縮了5,等於x1-5,x2-5

進階:圓形版

stroke-dashedarray

圓形的stroke-dashedarray 100%不是整條圓周,整條圓周的%算法是

//等於圓周長*100%
svg半徑(r)*2*3.14*100%

所以

svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=40)
svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: calc(40* 3.14 * 2 * 100%)
  //100%加不加都沒差,反正圓周總長度=圓周長

可以得到一個圓框

svg
  border: 1px solid #000
  width: 300px
circle
  fill: none
  stroke: black
  stroke-dasharray: 0% calc(40* 3.14 * 2 * 100%)

則可以得到一個透明圓框

circle: stroke-dashoffset

圓形預設由正右方往下畫出來的,所以要往上偏移25%的長度

//往上偏移25%的長度
svg半徑(r)*2*3.14*25%

動態圓形百分比

注意事項

  • 圓形從正右邊開始往下畫,不是從正上方開始往下,所以要用stroke-dashoffset偏移適當距離
  • 半徑×6.28×指定%數=實線長度,其餘部分為虛線長度
  • 動畫起始値為實線0,虛線長等於圓周長
svg(viewbox="-50 -50 100 100")
  circle(cx=0,cy=0,r=20)
  text(x=-11,y=4) 80%
svg
  border: 1px solid #000
  width: 300px
  circle
    fill: none
    stroke: #90a955
    animation: apc 5s infinite
  text
    font-size: 10px
    fill: #90a955
    
  
@keyframes apc
  0%
    //動畫裡面不知為何不能用calc
    //圓周長20*2*3.14=125.6
    //80%圓周長125.6*0.8=100.48
    //20%圓周長125.6*0.2=25.12
    //往上偏移25%:125.6*25%=31.4
    stroke-dasharray: 0,125.6
    stroke-dashoffset: 31.4
  100%
    stroke-dasharray: 100.48,25.12
    stroke-dashoffset: 31.4

Display
80%

Leave a Reply

Your email address will not be published. Required fields are marked *