How to create circle svg progress bar with dashed border - html

Question

i"m using this awesome tutorial for creating circle progress bar.
but my problem is that i want to change the stroke-dasharray in the CSS:
fill: none;
stroke: #FF2A2A;
stroke-width: 9.9213;
stroke-miterlimit: 10;
stroke-dasharray: 1.4308, 1.4308;
I want it to animate it like in the tutorial but to look like this image:
Dashed border circle

Answer 1

Try the following changes to the tutorial you mentioned:
progress.component.css:
~~~~~~~~~~~~~~~~~~~~~~~
.progress__meter {
stroke: #4CAF50;
}
.progress__value {
stroke: white;
transition: all 100ms;
}
progres.component.html:
~~~~~~~~~~~~~~~~~~~~~~~
<div class="progress">
<svg class="progress__svg" width="120" height="120" viewBox="0 0 120 120">
<circle class="progress__meter" [style.strokeDasharray]="5" cx="60" cy="60" [attr.r]="radius" stroke-width="11" />
<circle class="progress__value" [style.strokeDasharray]="circumference" [style.strokeDashoffset]="1-dashoffset" cx="60" cy="60" [attr.r]="radius" stroke-width="12" />
</svg>
<div class="progress__value-text">{{value}}%</div>
</div>
progress.component.ts:
~~~~~~~~~~~~~~~~~~~~~~
private progress(value: number) {
const progress = value / 100;
this.dashoffset = this.circumference * (progress);
}