1. 首頁
  2. 問答
  3. 圓形進度條（css）

圓形進度條（css）

2017-06-01 216 views

回答

1

我覺得that's不是一個好的解決方案加載一個27K的CSS文件。圓形帽是純CSS的問題（你可以在開始和結束位置插入圓圈）

創建svg的時間更短。

一個小樣本

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>svgPercent</title> 
    </head> 
    <body> 
    <svg width="200" height="200" viewBox="0 0 200 200"> 
     <path id="arc1" fill="none" stroke="yellow" stroke-width="20" stroke-linecap="round"/> 
     <path id="arc2" fill="none" stroke="grey" stroke-width="20" stroke-linecap="round"/> 

     <text x="50%" y="40%" 
      font-family="Arial" 
      font-weight="bold" 
      font-size="50" 
      alignment-baseline="middle" text-anchor="middle">%25</text> 

    </svg> 
    <script> 
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
    var angleInRadians = (angleInDegrees-90) * Math.PI/180.0; 

    return { 
     x: centerX + (radius * Math.cos(angleInRadians)), 
     y: centerY + (radius * Math.sin(angleInRadians)) 
    }; 
    } 

    function describeArc(x, y, radius, startAngle, endAngle){ 

     var start = polarToCartesian(x, y, radius, endAngle); 
     var end = polarToCartesian(x, y, radius, startAngle); 

     var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 

     var d = [ 
      "M", start.x, start.y, 
      "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y 
     ].join(" "); 

     return d;  
    } 
    document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 1, 360)); 
    document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 360, 90)); 
    </script> 
    </body> 
    </html>

來源

2017-06-01 15:40:24

+0

我不想使用svg。我想編輯這段代碼：cssscript.com/demo/pure-css-circular-percentage-bar。因爲您可以輕鬆編輯後端。 –

+0

我認爲問題是在行結束時......我檢查了代碼，在這裏看不到方法。 –

相關問題

 相關問題