Currently, I am working on creating a progress ring using SVG and CSS. It is functioning well in Chrome; however, Firefox (61.0.1 (64-bit)) is giving me trouble as it does not display the circle. I attempted to apply the method from this question but did not succeed. Is there a way to style the ring so that it appears correctly in both Chrome and Firefox (latest versions)? Could it be an issue if I'm adding styles with [ngStyles] dynamically? This dynamic styling is necessary for calculating the space and displaying the progress.
You can view a live example on CodeSandbox. The example currently only works in Chrome and not in Firefox.
HTML
<div class="my-progress-ring">
<svg>
<circle class="progress" [ngStyle]="getCircleStyles()"/>
</svg>
</div>
CSS
div.my-progress-ring {
width: 50px;
height: 50px;
}
svg {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
circle.progress {
stroke: red;
stroke-width: 4px;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
cx: 50%;
cy: 50%;
fill: transparent;
}
Typescript
public getCircleStyles(): any {
return {
'r': 21,
'stroke-dasharray': 131.947,
'stroke-dashoffset': 32.987
};
}
EDIT:
In this example, the values in the getCircleStyles function are hardcoded. In my application, I use a function to calculate these values based on the size of the progress ring and the current progress.
EDIT 2:
It appears that Firefox may be rejecting some properties or values in my styling. The r property seems to be missing
https://i.sstatic.net/aKhTa.png