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的<progress>元素（https://developer.mozilla.org/en/docs/Web/HTML/Element/progress），这似乎得到了很好的支持：http://caniuse.com/#feat=progress

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

Answer 3

HTML5 Canvas API是一种非常适合此类事物的纯JS解决方案。

检查一下 - RelativeLocationPath

{{1}}

如何使用虚线创建进度条？

3 个答案: