如何用虛線製作進度條？

Question

也許你已經看到了這樣一個進度條？例如分享鏈接。有什麼想法如何做到這一點？謝謝！ Image progress bar

Answer 1

我認爲，畫布是不是最好的解決辦法...

可以容易SVG創建此：

一些行作爲樣本，修改它以解決您的問題：

 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
     svg.setAttribute('width', '200'); 
     svg.setAttribute('height', '200'); 
     svg.setAttribute("viewBox", "0 0 200 200"); 
     svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 

    var myLine=document.createElementNS("http://www.w3.org/2000/svg", "line"); 
     with(myLine){ 
     setAttribute("x1", "100"); 
     setAttribute("y1", "5"); 
     setAttribute("x2", "100"); 
     setAttribute("y2", "15"); 
     setAttribute("stroke", "#ccc"); 
     setAttribute("stroke-width", "2"); 
     setAttribute("transform", "rotate(0,100,100)"); 

     } 
    var myNodes=[]; 
    var els=100; 
    var step = 360/els; 
    for (var i=0;i<els;i++){ 
     myNodes[i]=myLine.cloneNode(true); 
     myNodes[i].setAttribute("transform", "rotate("+i*step+",100,100)"); 
     svg.appendChild(myNodes[i]); 
    } 

    //make 30% red; 
    var percent=30; 
    for (i=0;i<=percent;i++){ 
     myNodes[i].setAttribute("stroke", "#f00"); 
    } 
    document.body.appendChild(svg); 

看到liddle fiddle

Answer 2

對於這種類型的東西，HTML5 Canvas API是一個很棒的純JS解決方案。

檢查了這一點 - https://codepen.io/JanAmbrozic/pen/ZpVvXN

var progressCircle = { 
    init: function(width, height, lineWidth, color) { 
    var el = document.getElementById('progressCircle');  
    this.canvas = document.getElementById('progCanvas'); 
    this.span = document.getElementById('progSpan'); 
    this.span.textContent = '0%';  
    this.ctx = this.canvas.getContext('2d'); 
    this.canvas.width = width; 
    this.canvas.height = height; 
    this.ctx.lineWidth = lineWidth; 
    this.ctx.lineCap = 'round'; 
    this.ctx.translate(width/2, height/2); 
    this.ctx.rotate(-90*Math.PI/180);  
    this.radius = (width - lineWidth)/2; 
    this.drawCircle("#edc79b", 100); 
    }, 

    drawCircle : function(color, percent) {  
     percent = percent/100; 
     this.ctx.beginPath(); 
     this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2 * percent, false); 
    this.ctx.strokeStyle = color; 
     this.ctx.stroke(); 
    } 
} 

Answer 3

如果你願意，你可以使用HTML5的<progress>元素（https://developer.mozilla.org/en/docs/Web/HTML/Element/progress），這似乎是支持得很好簡單的進度條：http://caniuse.com/#feat=progress

然後，您可以在其應用自定義樣式，這樣你可以看到小圓點時進展增加。