Erstellen und Füllen von Bogen progressiv mit CSS - Kreis Fortschrittsbalken

Question

Ich habe Schwierigkeiten, einen Bogen wie ein Fortschrittsbalken zu füllen, weil ich nicht so gut mit CSS arbeiten.

Ich will einen „Fortschritt“ arc wie folgt erreichen:

ich mit diesem über kam: 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! :) */ 
} 

und versuchen, wie sein zu gestalten, was ich will, aber ohne Erfolg bis jetzt: hier: https://codepen.io/anon/pen/qpNrEP

Könnte jemand Hilfe dabei geben? Kann auch eine alternative Lösung sein, um dies zu erreichen.

Ich schätze

Mit freundlichen Grüßen

Answer 1

Sie können ein SVG mit zwei Bogen auf oben auf dem anderen verwenden und dann stroke-dash-array verwenden.

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>

Answer 2

Hier ist ein Winkelmodul, das SVG eine kreisförmige progressbar erstellen verwendet. Sieht nach genau dem aus, wonach du suchst.

Repo: https://github.com/crisbeto/angular-svg-round-progressbar

Demo: http://crisbeto.github.io/angular-svg-round-progressbar/

Answer 3

Ich habe gerade eine plnker in Angular 2, die ich, es ist genau das denken, was Sie wollen.

es einrichten die Füllung des zweiten Bogens mit einer variablen:

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

Dann wird in der Komponente nenne ich eine Funktion, die den Wert von einem Schieber nehmen mit min = 0 und 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

es werfen sie einen Blick!