Add circle shape Safari fallback

zumerlab · Dec 1, 2024 · e54a235 · e54a235
1 parent ca5f1c9
commit e54a235
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js
@@ -58,16 +58,17 @@ export class OrbitProgress extends HTMLElement {
   update() {
     const { shape } = this.getAttributes();
     const svg = this.shadowRoot.querySelector('svg');
-    const defs = this.createDefs();
-    if (shape !== 'none') {
+    if (shape !== 'none' && shape !== 'circle') {
+      const defs = this.createDefs();
       defs.appendChild(this.createMarker('head', 'end'));
       defs.appendChild(this.createMarker('tail', 'start'));
+      svg.querySelector('defs').replaceWith(defs);
     }
     const progressBg = this.shadowRoot.querySelector('.progress-bg');
     const progressBar = this.shadowRoot.querySelector('.progress-bar');
     this.updateArc(progressBg, true);
     this.updateArc(progressBar, false);
-    svg.querySelector('defs').replaceWith(defs);
+
   }
 
   createSVGElement() {
@@ -94,7 +95,8 @@ export class OrbitProgress extends HTMLElement {
     arc.setAttribute('d', d);
     arc.setAttribute('stroke', full ? progressBgColor : progressBarColor);
     arc.setAttribute('fill', 'transparent');
-    if (shape !== 'none') {
+    if (shape === 'circle') arc.setAttribute('stroke-linecap', 'round');
+    if (shape !== 'none' && shape !== 'circle') {
       arc.setAttribute('marker-end', 'url(#head)');
       arc.setAttribute('marker-start', 'url(#tail)');
     }