diff --git a/.changeset/fix-toast-loading-ring-misaligned.md b/.changeset/fix-toast-loading-ring-misaligned.md
new file mode 100644
index 0000000000..d3a752f225
--- /dev/null
+++ b/.changeset/fix-toast-loading-ring-misaligned.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Toast): Fixed loading ring alignment when zooming in Safari.
diff --git a/packages/react-magma-dom/src/components/ProgressRing/index.tsx b/packages/react-magma-dom/src/components/ProgressRing/index.tsx
index 7ce9a7fdb6..4ed64ac771 100644
--- a/packages/react-magma-dom/src/components/ProgressRing/index.tsx
+++ b/packages/react-magma-dom/src/components/ProgressRing/index.tsx
@@ -18,6 +18,9 @@ export interface ProgressRingProps
 
 const Circle = styled.circle`
   transition: stroke-dashoffset 0.35s;
+`;
+
+const Svg = styled.svg`
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
 `;
@@ -64,7 +67,7 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
 
     return (
       <div {...other} ref={ref} data-testid={testId}>
-        <svg height={radius * 2} width={radius * 2}>
+        <Svg height={radius * 2} width={radius * 2}>
           <Circle
             cx={radius}
             cy={radius}
@@ -73,9 +76,9 @@ export const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
             stroke={color ? color : theme.colors.neutral}
             strokeWidth={strokeWidth}
             strokeDasharray={`${circumference} ${circumference}`}
-            style={{ strokeDashoffset }}
+            strokeDashoffset={strokeDashoffset}
           />
-        </svg>
+        </Svg>
       </div>
     );
   }