diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3468effaf2..f9d9874441 100644
--- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -21,36 +21,36 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -78,36 +78,36 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -153,36 +153,36 @@ exports[`renders components/progress/demo/circle.tsx extend context correctly 1`
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -231,36 +231,36 @@ Array [
       <svg
         class="ant-progress-circle"
         role="presentation"
-        viewBox="-50 -50 100 100"
+        viewBox="0 0 100 100"
       >
         <circle
           class="ant-progress-circle-trail"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+          style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="0"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="0"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
         />
       </svg>
       <span
@@ -354,37 +354,37 @@ Array [
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="40"
             stroke="#e6f4ff"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="40"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="40"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
       </span>
@@ -445,36 +445,36 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -502,36 +502,36 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 91.59291283123217; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -577,36 +577,36 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -756,36 +756,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -813,36 +813,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -870,36 +870,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
             </svg>
           </span>
@@ -952,36 +952,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -1009,36 +1009,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -1066,36 +1066,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
             </svg>
           </span>
@@ -1292,36 +1292,36 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 61.44671332616011; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 61.44671332616011; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -1349,36 +1349,36 @@ exports[`renders components/progress/demo/dashboard.tsx extend context correctly
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(105deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(105deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 70.67514174608013; transform: rotate(105deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 70.67514174608013; transform: rotate(105deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 270.6905669843205; transform: rotate(105deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 270.7005669843205px 295.3097094374406; stroke-dashoffset: 270.6905669843205; transform: rotate(105deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -1511,36 +1511,36 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 76.82742735936014; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -1568,36 +1568,36 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
           />
         </svg>
         <span
@@ -1615,7 +1615,9 @@ exports[`renders components/progress/demo/format.tsx extend context correctly 1`
 exports[`renders components/progress/demo/format.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 1`] = `
-Array [
+<div
+  style="display: flex; flex-direction: column; row-gap: 16px;"
+>
   <div
     aria-valuenow="99"
     class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
@@ -1640,7 +1642,7 @@ Array [
     >
       99.9%
     </span>
-  </div>,
+  </div>
   <div
     aria-valuenow="99"
     class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
@@ -1665,7 +1667,7 @@ Array [
     >
       99.9%
     </span>
-  </div>,
+  </div>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
     style="flex-wrap: wrap; margin-bottom: -8px;"
@@ -1686,55 +1688,56 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
-            <defs>
-              <lineargradient
-                id="rc_progress_TEST_OR_SSR-gradient"
-                x1="100%"
-                x2="0%"
-                y1="0%"
-                y2="0%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="#108ee9"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="#87d068"
-                />
-              </lineargradient>
-            </defs>
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 29.53097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
-              opacity="1"
-              r="47"
-              stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
-              stroke-linecap="round"
-              stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 32.53097094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
-            />
-            <circle
-              class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -1748,7 +1751,7 @@ Array [
     </div>
     <div
       class="ant-space-item"
-      style="padding-bottom: 8px;"
+      style="margin-right: 8px; padding-bottom: 8px;"
     >
       <div
         aria-valuenow="100"
@@ -1762,55 +1765,56 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
-            <defs>
-              <lineargradient
-                id="rc_progress_TEST_OR_SSR-gradient"
-                x1="100%"
-                x2="0%"
-                y1="0%"
-                y2="0%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="#108ee9"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="#87d068"
-                />
-              </lineargradient>
-            </defs>
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
-              opacity="1"
-              r="47"
-              stroke="url(#rc_progress_TEST_OR_SSR-gradient)"
-              stroke-linecap="round"
-              stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
-            />
-            <circle
-              class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -1839,8 +1843,338 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
-]
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="93"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 20.671679660620843; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="93%"
+          >
+            93%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -8px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="90"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 23.378685330464045; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="90%"
+          >
+            90%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="100"
+        class="ant-progress ant-progress-status-success ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <div
+        aria-valuenow="93"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width: 120px; height: 120px; font-size: 24px;"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+            />
+            <mask
+              id="rc_progress_TEST_OR_SSR-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 16.365079731324833; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#rc_progress_TEST_OR_SSR-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <div
+                  style="width: 100%; height: 100%;"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="93%"
+          >
+            93%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders components/progress/demo/gradient-line.tsx extend context correctly 2`] = `[]`;
@@ -2198,36 +2532,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 73.82742735936014; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 73.82742735936014; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.3097094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2255,36 +2589,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 58.44671332616011; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 58.44671332616011; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.78685330464043; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2372,36 +2706,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2448,36 +2782,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2630,36 +2964,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2687,36 +3021,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2744,36 +3078,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
             </svg>
           </span>
@@ -2826,36 +3160,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2883,36 +3217,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+              style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
             />
           </svg>
           <span
@@ -2940,36 +3274,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
               />
             </svg>
           </span>
diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
index 59ba9f8689..244c1a4848 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
@@ -21,36 +21,36 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:76.82742735936014;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:76.82742735936014;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -78,36 +78,36 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:91.59291283123217;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:91.59291283123217;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -153,36 +153,36 @@ exports[`renders components/progress/demo/circle.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -229,36 +229,36 @@ Array [
       <svg
         class="ant-progress-circle"
         role="presentation"
-        viewBox="-50 -50 100 100"
+        viewBox="0 0 100 100"
       >
         <circle
           class="ant-progress-circle-trail"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="0"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="0"
           r="47"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
         />
       </svg>
       <span
@@ -350,37 +350,37 @@ Array [
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="40"
             stroke="#e6f4ff"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="40"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="40"
             stroke-linecap="round"
             stroke-width="20"
-            style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
       </span>
@@ -415,36 +415,36 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -472,36 +472,36 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:91.59291283123217;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:91.59291283123217;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -547,36 +547,36 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -724,36 +724,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -781,36 +781,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -838,36 +838,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
             </svg>
           </span>
@@ -896,36 +896,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -953,36 +953,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -1010,36 +1010,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
             </svg>
           </span>
@@ -1210,36 +1210,36 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:61.44671332616011;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:61.44671332616011;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -1267,36 +1267,36 @@ exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:0;transform:rotate(105deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:0;transform:rotate(105deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:70.67514174608013;transform:rotate(105deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:70.67514174608013;transform:rotate(105deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:270.6905669843205;transform:rotate(105deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:270.7005669843205px 295.3097094374406;stroke-dashoffset:270.6905669843205;transform:rotate(105deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -1425,36 +1425,36 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:76.82742735936014;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:76.82742735936014;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -1482,36 +1482,36 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
         <svg
           class="ant-progress-circle"
           role="presentation"
-          viewBox="-50 -50 100 100"
+          viewBox="0 0 100 100"
         >
           <circle
             class="ant-progress-circle-trail"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="1"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
           <circle
             class="ant-progress-circle-path"
-            cx="0"
-            cy="0"
+            cx="50"
+            cy="50"
             opacity="0"
             r="47"
             stroke-linecap="round"
             stroke-width="6"
-            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
           />
         </svg>
         <span
@@ -1527,7 +1527,9 @@ exports[`renders components/progress/demo/format.tsx correctly 1`] = `
 `;
 
 exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
-Array [
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
   <div
     aria-valuenow="99"
     class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
@@ -1552,7 +1554,7 @@ Array [
     >
       99.9%
     </span>
-  </div>,
+  </div>
   <div
     aria-valuenow="99"
     class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
@@ -1577,7 +1579,7 @@ Array [
     >
       99.9%
     </span>
-  </div>,
+  </div>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
     style="flex-wrap:wrap;margin-bottom:-8px"
@@ -1598,55 +1600,56 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
-            <defs>
-              <lineargradient
-                id="undefined-gradient"
-                x1="100%"
-                x2="0%"
-                y1="0%"
-                y2="0%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="#108ee9"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="#87d068"
-                />
-              </lineargradient>
-            </defs>
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:29.53097094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to top, #108ee9 0%, #87d068 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 0deg, #108ee9 0%, #87d068 100%)"
+                />
+              </div>
+            </foreignobject>
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
-              opacity="1"
-              r="47"
-              stroke="url(#undefined-gradient)"
-              stroke-linecap="round"
-              stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:32.53097094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-            />
-            <circle
-              class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.3097094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -1660,7 +1663,7 @@ Array [
     </div>
     <div
       class="ant-space-item"
-      style="padding-bottom:8px"
+      style="margin-right:8px;padding-bottom:8px"
     >
       <div
         aria-valuenow="100"
@@ -1674,55 +1677,56 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
-            <defs>
-              <lineargradient
-                id="undefined-gradient"
-                x1="100%"
-                x2="0%"
-                y1="0%"
-                y2="0%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="#108ee9"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="#87d068"
-                />
-              </lineargradient>
-            </defs>
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to top, #108ee9 0%, #87d068 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 0deg, #108ee9 0%, #87d068 100%)"
+                />
+              </div>
+            </foreignobject>
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
-              opacity="1"
-              r="47"
-              stroke="url(#undefined-gradient)"
-              stroke-linecap="round"
-              stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-            />
-            <circle
-              class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
-              stroke-linecap="round"
+              stroke-linecap="butt"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.3097094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -1751,8 +1755,338 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
-]
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <div
+        aria-valuenow="93"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:20.671679660620843;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to top, #87d068 0%, #ffe58f 50%, #ffccc7 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 0deg, #87d068 0%, #ffe58f 50%, #ffccc7 100%)"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.3097094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="93%"
+          >
+            93%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-8px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <div
+        aria-valuenow="90"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:23.378685330464045;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to bottom, #108ee9 0%, #87d068 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 217.5deg, #108ee9 0%, #87d068 79%)"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.78685330464043;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="90%"
+          >
+            90%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <div
+        aria-valuenow="100"
+        class="ant-progress ant-progress-status-success ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to bottom, #108ee9 0%, #87d068 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 217.5deg, #108ee9 0%, #87d068 79%)"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.78685330464043;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+          >
+            <span
+              aria-label="check"
+              class="anticon anticon-check"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <div
+        aria-valuenow="93"
+        class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner ant-progress-circle-gradient"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="50"
+              cy="50"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <mask
+              id="undefined-gradient-conic"
+            >
+              <circle
+                class="ant-progress-circle-path"
+                cx="50"
+                cy="50"
+                opacity="1"
+                r="47"
+                stroke="#FFF"
+                stroke-linecap="butt"
+                stroke-width="6"
+                style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:16.365079731324833;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </mask>
+            <foreignobject
+              height="100"
+              mask="url(#undefined-gradient-conic)"
+              width="100"
+              x="0"
+              y="0"
+            >
+              <div
+                style="width:100%;height:100%;background:linear-gradient(to bottom, #87d068 0%, #ffe58f 50%, #ffccc7 100%)"
+              >
+                <div
+                  style="width:100%;height:100%;background:conic-gradient(from 217.5deg, #87d068 0%, #ffe58f 39%, #ffccc7 79%)"
+                />
+              </div>
+            </foreignobject>
+            <circle
+              class="ant-progress-circle-path"
+              cx="50"
+              cy="50"
+              opacity="0"
+              r="47"
+              stroke-linecap="butt"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.78685330464043;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="93%"
+          >
+            93%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders components/progress/demo/line.tsx correctly 1`] = `
@@ -2104,36 +2438,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:73.82742735936014;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:73.82742735936014;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.3097094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.3097094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2161,36 +2495,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:58.44671332616011;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:58.44671332616011;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="butt"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.78685330464043;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.78685330464043;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2257,36 +2591,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(18deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(18deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:209.7167966062084;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2314,36 +2648,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:166.6507973132483;transform:rotate(213deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:166.6507973132483;transform:rotate(213deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:166.6507973132483;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:166.6507973132483;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2475,36 +2809,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2532,36 +2866,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2589,36 +2923,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
             </svg>
           </span>
@@ -2647,36 +2981,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2704,36 +3038,36 @@ Array [
           <svg
             class="ant-progress-circle"
             role="presentation"
-            viewBox="-50 -50 100 100"
+            viewBox="0 0 100 100"
           >
             <circle
               class="ant-progress-circle-trail"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="1"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
             <circle
               class="ant-progress-circle-path"
-              cx="0"
-              cy="0"
+              cx="50"
+              cy="50"
               opacity="0"
               r="47"
               stroke-linecap="round"
               stroke-width="6"
-              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
             />
           </svg>
           <span
@@ -2761,36 +3095,36 @@ Array [
             <svg
               class="ant-progress-circle"
               role="presentation"
-              viewBox="-50 -50 100 100"
+              viewBox="0 0 100 100"
             >
               <circle
                 class="ant-progress-circle-trail"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="1"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
               <circle
                 class="ant-progress-circle-path"
-                cx="0"
-                cy="0"
+                cx="50"
+                cy="50"
                 opacity="0"
                 r="42.5"
                 stroke-linecap="round"
                 stroke-width="15"
-                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
               />
             </svg>
           </span>
diff --git a/components/progress/__tests__/__snapshots__/index.test.tsx.snap b/components/progress/__tests__/__snapshots__/index.test.tsx.snap
index 2213222600..37a2caf166 100644
--- a/components/progress/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,36 +13,36 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #52C41A; stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #52C41A; stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
@@ -68,36 +68,36 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #52C41A; stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #52C41A; stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
@@ -123,36 +123,36 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
@@ -388,36 +388,36 @@ exports[`Progress render strokeColor 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="1"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: red; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: red; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="0"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
@@ -500,36 +500,36 @@ exports[`Progress render strokeWidth of progress 1`] = `
       <svg
         class="ant-progress-circle"
         role="presentation"
-        viewBox="-50 -50 100 100"
+        viewBox="0 0 100 100"
       >
         <circle
           class="ant-progress-circle-trail"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           r="25"
           stroke-linecap="round"
           stroke-width="50"
-          style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+          style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="1"
           r="25"
           stroke-linecap="round"
           stroke-width="50"
-          style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 134.95574287564276; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 134.95574287564276; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
         />
         <circle
           class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
+          cx="50"
+          cy="50"
           opacity="0"
           r="25"
           stroke-linecap="round"
           stroke-width="50"
-          style="stroke: #52C41A; stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 157.06963267948967; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          style="stroke: #52C41A; stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 157.06963267948967; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
         />
       </svg>
       <span
@@ -588,36 +588,36 @@ exports[`Progress render successColor progress type="circle" 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="1"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="1"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #ffffff; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #ffffff; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
@@ -643,36 +643,36 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
     <svg
       class="ant-progress-circle"
       role="presentation"
-      viewBox="-50 -50 100 100"
+      viewBox="0 0 100 100"
     >
       <circle
         class="ant-progress-circle-trail"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+        style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="1"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
       <circle
         class="ant-progress-circle-path"
-        cx="0"
-        cy="0"
+        cx="50"
+        cy="50"
         opacity="1"
         r="47"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke: #ffffff; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+        style="stroke: #ffffff; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
       />
     </svg>
     <span
diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md
index 94ce0ee2a6..184175e327 100644
--- a/components/progress/demo/gradient-line.md
+++ b/components/progress/demo/gradient-line.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-`linear-gradient` 的封装。推荐只传两种颜色。
+渐变色封装，`circle` 与 `dashboard` 设置渐变时 `strokeLinecap` 会被忽略。
 
 ## en-US
 
-A package of `linear-gradient`. It is recommended to only pass two colors.
+Gradient encapsulation, `circle` and `dashboard` will ignore `strokeLinecap` when setting gradient.
diff --git a/components/progress/demo/gradient-line.tsx b/components/progress/demo/gradient-line.tsx
index 87fcb2ee6e..03d6b166e4 100644
--- a/components/progress/demo/gradient-line.tsx
+++ b/components/progress/demo/gradient-line.tsx
@@ -1,15 +1,24 @@
 import React from 'react';
 import { Progress, Space } from 'antd';
 
+const twoColors = { '0%': '#108ee9', '100%': '#87d068' };
+const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
+
 const App: React.FC = () => (
-  <>
-    <Progress percent={99.9} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+    <Progress percent={99.9} strokeColor={twoColors} />
     <Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
     <Space wrap>
-      <Progress type="circle" percent={90} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
-      <Progress type="circle" percent={100} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+      <Progress type="circle" percent={90} strokeColor={twoColors} />
+      <Progress type="circle" percent={100} strokeColor={twoColors} />
+      <Progress type="circle" percent={93} strokeColor={conicColors} />
     </Space>
-  </>
+    <Space wrap>
+      <Progress type="dashboard" percent={90} strokeColor={twoColors} />
+      <Progress type="dashboard" percent={100} strokeColor={twoColors} />
+      <Progress type="dashboard" percent={93} strokeColor={conicColors} />
+    </Space>
+  </div>
 );
 
 export default App;
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index aa9c81f5ce..9b377ae2ee 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -65,7 +65,7 @@ Properties that shared by all types.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - |
+| strokeColor | The color of circular progress, render gradient when passing an object | string \| { number%: string } | - | - |
 | strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
 
 ### `type="dashboard"`
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 646c1ecdc6..6d8d5a84d0 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -66,7 +66,7 @@ demo:
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
 | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
 
 ### `type="dashboard"`
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index af61a4933c..574290ab91 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -1,10 +1,11 @@
+import * as React from 'react';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
 import warning from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
@@ -15,10 +16,11 @@ import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
-export type ProgressType = (typeof ProgressTypes)[number];
+export type ProgressType = typeof ProgressTypes[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
 export type ProgressSize = 'default' | 'small';
-export type StringGradients = { [percentage: string]: string };
+export type StringGradients = Record<string, string>;
+
 type FromToGradients = { from: string; to: string };
 export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
 
@@ -38,7 +40,7 @@ export interface ProgressProps extends ProgressAriaProps {
   type?: ProgressType;
   percent?: number;
   format?: (percent?: number, successPercent?: number) => React.ReactNode;
-  status?: (typeof ProgressStatuses)[number];
+  status?: typeof ProgressStatuses[number];
   showInfo?: boolean;
   strokeWidth?: number;
   strokeLinecap?: 'butt' | 'square' | 'round';
@@ -82,7 +84,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     );
   }, [percent, props.success, props.successPercent]);
 
-  const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => {
+  const progressStatus = React.useMemo<typeof ProgressStatuses[number]>(() => {
     if (!ProgressStatuses.includes(status!) && percentNumber >= 100) {
       return 'success';
     }
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index d54fcfa803..34c92f5d00 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2606,36 +2606,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="1"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                 </svg>
                 <span
@@ -3377,36 +3377,36 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
               <svg
                 class="ant-progress-circle"
                 role="presentation"
-                viewBox="-50 -50 100 100"
+                viewBox="0 0 100 100"
               >
                 <circle
                   class="ant-progress-circle-trail"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                  style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                 />
                 <circle
                   class="ant-progress-circle-path"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   opacity="1"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                  style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                 />
                 <circle
                   class="ant-progress-circle-path"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   opacity="0"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                  style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                 />
               </svg>
               <span
@@ -3627,36 +3627,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                 </svg>
                 <span
@@ -3810,36 +3810,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                 </svg>
                 <span
@@ -3993,36 +3993,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                 </svg>
                 <span
@@ -4176,36 +4176,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
                   />
                 </svg>
                 <span
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index ada9a7db45..82a3758137 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -2266,36 +2266,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="1"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                 </svg>
                 <span
@@ -3033,36 +3033,36 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
               <svg
                 class="ant-progress-circle"
                 role="presentation"
-                viewBox="-50 -50 100 100"
+                viewBox="0 0 100 100"
               >
                 <circle
                   class="ant-progress-circle-trail"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                 />
                 <circle
                   class="ant-progress-circle-path"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   opacity="1"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                 />
                 <circle
                   class="ant-progress-circle-path"
-                  cx="0"
-                  cy="0"
+                  cx="50"
+                  cy="50"
                   opacity="0"
                   r="48"
                   stroke-linecap="round"
                   stroke-width="4"
-                  style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                 />
               </svg>
               <span
@@ -3281,36 +3281,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                 </svg>
                 <span
@@ -3464,36 +3464,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                 </svg>
                 <span
@@ -3647,36 +3647,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                 </svg>
                 <span
@@ -3830,36 +3830,36 @@ Array [
                 <svg
                   class="ant-progress-circle"
                   role="presentation"
-                  viewBox="-50 -50 100 100"
+                  viewBox="0 0 100 100"
                 >
                   <circle
                     class="ant-progress-circle-trail"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                   <circle
                     class="ant-progress-circle-path"
-                    cx="0"
-                    cy="0"
+                    cx="50"
+                    cy="50"
                     opacity="0"
                     r="48"
                     stroke-linecap="round"
                     stroke-width="4"
-                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
                   />
                 </svg>
                 <span
diff --git a/package.json b/package.json
index f14ddeb1ad..e76e3cea3c 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
     "rc-notification": "~5.0.4",
     "rc-pagination": "~3.6.0",
     "rc-picker": "~3.13.0",
-    "rc-progress": "~3.4.1",
+    "rc-progress": "~3.5.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.2.0",
     "rc-segmented": "~2.2.0",