1. 首页
  2. 问答
  3. 圆形进度条（css）

圆形进度条（css）

2017-06-01 126 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

我认为问题是在行结束时......我检查了代码，在这里看不到方法。 –

相关问题

 相关问题