使用 css 逐步创建和填充弧 - 圆形进度条答案

【问题标题】：Create and Filling arc progressively with css - circle progress bar使用 css 逐步创建和填充弧 - 圆形进度条
【发布时间】：2018-06-03 06:09:12
【问题描述】：

我很难像进度条一样填充弧线，因为我不太擅长使用 css。

我想实现这样的“进步”弧：

我遇到了这个：https://codepen.io/enslavedeagle/pen/AXzaKE

#arc,
#arc::before {
  display: block;
  box-sizing: border-box;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

#arc {
  border: solid #00BBEE 12px;
  clip: rect(0px, 100px, 50px, 0px);
  margin: 25px;
}

#arc::before {
  content: '';
  border: solid black 12px;
  top: -12px;
  left: -12px;
  clip: rect(0px, 100px, 50px, 0px);
  transform: rotate(-150deg);
  /* define the fill length, using the rotation above.
     from -180deg (0% fill) to 0deg (100% fill) */
  /* if you have a better solution to make thing like this 
     work, please let me know! :) */
}

并尝试自定义为我想要的，但直到现在都没有成功：这里：https://codepen.io/anon/pen/qpNrEP

任何人都可以提供一些帮助吗？也可以是实现此目的的替代解决方案。

我很感激

亲切的问候，

【问题讨论】：

你可以使用 jquery 还是只使用 css？
我可以使用 Angular 4

标签： html css animation progress-bar

【解决方案1】：

您可以使用两个圆弧在另一个之上的 SVG，然后使用 stroke-dash-array。

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 * 3.142 * 1.85);
  stroke-dashoffset: 20;
  /* adjust last number for variance */
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <path class="grey" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
    <path class="purple" d="M40,90
             A40,40 0 1,1 60,90"
          style="fill:none;"/>
</svg>

【讨论】：

这就是我一直在寻找的...现在我只需要将 stroke-dashoffset 的值映射到 0-100% 以使进度生效。我想投票一千次！太感谢了！你介意解释一下stroke-dasharray (calc(40 * 3.142 * 1.85)) 的计算是如何工作的吗？
这听起来有点复杂，因为您可能需要 JS 来确定实际的破折号数组和破折号偏移量。计算值大致（半径 * Pi * 任何范围）。如果你对它很粗暴，它确实会破裂。正如我所说，这些通常由 JS 管理。这只是为了演示这个概念。
我会用angular来管理，没问题。我只想知道如何绘制弧线并填充它（stroke-dasharray）。我问是因为我不习惯使用几何形式……所以我不明白你是怎么得出这个结果的，比如：为什么是 1.85？在计算表上？如果可能的话，我们可以在聊天中交谈吗？再次感谢
您好，您能告诉我如何使进度条变大吗？

【解决方案2】：

使用 SVG 是创建这样的弧线的最佳方式。这是加载器所有迭代的解决方案：

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
}

.red {
  stroke: #e33800;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
  /* adjust last number for variance */
}

.red-02 {
  stroke-dashoffset: 220;
}

.red-03 {
  stroke-dashoffset: 200;
}

.red-04 {
  stroke-dashoffset: 180;
}

.red-05 {
  stroke-dashoffset: 160;
}

.red-06 {
  stroke-dashoffset: 140;
}

.red-07 {
  stroke-dashoffset: 120;
}

.red-08 {
  stroke-dashoffset: 100;
}

.red-09 {
  stroke-dashoffset: 50;
}

.red-10 {
  stroke-dashoffset: 0;
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-02" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-03" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-04" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-05" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-06" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-07" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-08" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-09" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="red red-10" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
</div>

https://codepen.io/shalinigandhi/pen/mdmmwdV

【讨论】：

【解决方案3】：

我刚刚在 Angular 2 中创建了一个 plnker，我认为这正是您想要的。

它使用变量管理第二个弧的填充：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <path class="grey" d="M40,90 A40,40 0 1,1 60,90" style="fill:none;"/>
    <path [ngStyle]="{'stroke-dashoffset':percentPath}" class="blue" d="M40,90 A40,40 0 1,1 60,90" style="fill:none;"/>
</svg>

然后，在组件中，我调用一个函数，该函数从 min=0 和 max=100 的滑块中获取值：

this.percentPath=(233-(V*2.33)); //233 is the maximun number stroke-dashoffset needs to disapear the second path

https://plnkr.co/edit/KNPThi?p=info

看看吧！

【讨论】：

谢谢，但从答案中我创建了一个可以动态使用的组件。您可以查看：elmeerr.github.io/ng2-arc-progress-demo
酷！太奇妙了。我打算做这个组件，但你已经做了。谢谢！
@ElmerDantas 您是否尝试过在页面完成加载时将圆弧从 0 设置为相应的值？现在我有这个问题
我不知道我是否明白了，但是使用for从0到相应的值然后增加你用作模型的变量来填充弧线进度不是这样吗？

【解决方案4】：

在没有找到我喜欢的答案后，我自己做了一些工作并制作了一个Codepen，您可以使用它来制作进度条，就像您描述的那样，输入是：圆的度数应该是 100 %，圆的半径和你要填充的百分比。 Progress bar example (image)

HTML：

<section class="stat" id="sectionId">
  <svg viewbox="0 0 100 100">
    <path class="bar" d="
    M 10, 50
    a 40,40 0 1,0 80,0
    a 40,40 0 1,0 -80,0
   "/>
    <path class="progress" d="
      M 10, 50
    a 40,40 0 1,0 80,0
    a 40,40 0 1,0 -80,0
    "/>
  </svg>

  <script type="text/javascript">
    _.makeProgressBar("01", 240, 40, 86);
  </script>
</section>

CSS：

.stat {
  width: 200px;
}

svg {
  display: block;
  transform-origin: center center;
  transform: rotate( 90deg );
}

path {
  stroke-linecap: round;
  stroke-width: 6px ;
  fill:none;
}

JS：

_ = {};

//this is a self executing function, it keeps the global namespace clean
(function(win, doc, helper){

  helper.makeProgressBar = function(id, totalDegrees, radius, percentage) {
    var section = doc.getElementById(id);
    var svg = section.children[0];
    var bar = svg.children[0];
    var progress = svg.children[1];

    if(percentage > 100){
        percentage = 100;
    }
    if(percentage < 0){
        percentage = 0;
    }

    var percentageDegrees = calculateDegreesFromPercentage(totalDegrees, percentage);

    var barDash = calculateDash(totalDegrees, radius);
    var barGap = calculateDash ( 360 - totalDegrees, radius) * 2;

    var progressDash = calculateDash(percentageDegrees, radius);
    var progressGap = calculateDash(360 - percentageDegrees, radius) * 2;

    var rotation = 0 - ((totalDegrees - percentageDegrees) / 2);

    bar.setAttribute("style", "stroke: #707070; fill: none; stroke-dasharray: " + barDash + " " + barGap + ";");
    progress.setAttribute("style", "stroke: #23CE39; fill: none; stroke-dasharray: " + progressDash + " " + progressGap + "; transform-origin: center center; transform: rotate("+ rotation +"deg)");
  }

  calculateDegreesFromPercentage = function(totalDegrees, percentage) {
    return totalDegrees/100*percentage;
  }

  calculateDash = function(degrees, radius) {
    return degrees * Math.PI / 180 * 0.5 * radius;
  }
})(window, document, _);

【讨论】：

截图看起来不错，但 Codepen 似乎不起作用。
@Christophe 抱歉回复太慢了，我刚刚检查了一下，由于某种原因，网站不得不在工作前思考了好几秒钟，但在我没有做任何更改的情况下它仍然可以工作。您是否按下按钮使进度条出现？