Create and Filling arc progressively with css - circle progress bar

问题

I'm struggling to fill an arc like a progress bar because I'm not that good working with css.

I want to achieve a "progress" arc like this:

I came across with this: 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! :) */
}

and try to customize to be like what I want to but with no sucess until now: here: https://codepen.io/anon/pen/qpNrEP

Could any one give some help with this? Can also be alternative solution to achieve this.

I appreciate

Kind regards,

回答1:

You can use an SVG with two arc on on top of the other and then use 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>

回答2:

I've just created a plnker in Angular 2 which I think it's exactly what you want.

It manage the fill of the second arc with a variable:

<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>

Then, in the component I call a function which take the value from a slider with min=0 and 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

take it a look!

回答3:

After not finding the answer I liked here I did some work myself and made a Codepen that you can use that makes progress bars exactly as you described with the inputs being: the amount of degrees of a circle that should be 100%, the radius of the circle and the percentage you to have filled. 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, _);

来源：https://stackoverflow.com/questions/47910146/create-and-filling-arc-progressively-with-css-circle-progress-bar