如何用虚线制作进度条？

Question

这样的进度条你可能见过吧？例如分享链接。有什么想法吗？谢谢！ Image progress bar

Answer 1

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 2

我认为 canvas 不是最好的解决方案...

您可以使用 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);

看一个谜语fiddle

Answer 3

如果你想要一个简单的进度条，你可以使用 HTML5 的 <progress> 元素（https://developer.mozilla.org/en/docs/Web/HTML/Element/progress) which seems to be supported quite well: http://caniuse.com/#feat=progress

然后您可以在其上应用自定义样式，以便在进度增加时可以看到小点。

如何用虚线制作进度条？

How to make progress bar with dotted lines?

javascript

css

sass

progress-bar