Create and Filling arc progressively with css - circle progress bar - html

Question

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,

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

Answer 2

Using SVG is the best way to create an arc like this.
Here is the solution with all iterations of the loader:
.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

Answer 3

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!

Answer 4

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, _);