refactor: Line Progress use pseudo (#46789)

* refactor: Line Progress use pseudo

* chore: code clean

* chore: update snapshot

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -21839,7 +21839,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21867,7 +21867,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21895,7 +21895,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21951,7 +21951,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
     >
       <div
         class="config-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -21979,7 +21979,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -22007,7 +22007,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
     >
       <div
         class="prefix-Progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>

components/progress/Line.tsx

@@ -5,8 +5,7 @@ import { devUseWarning } from '../_util/warning';
 import type { DirectionType } from '../config-provider';
 import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
 import { getSize, getSuccessPercent, validProgress } from './utils';
-import { useContext } from 'react';
-import { ConfigContext } from '../config-provider';
+import { LineStrokeColorVar, Percent } from './style';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -65,9 +64,11 @@ export const handleGradient = (
   } = strokeColor;
   if (Object.keys(rest).length !== 0) {
     const sortedGradients = sortGradient(rest as StringGradients);
-    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
+    const background = `linear-gradient(${direction}, ${sortedGradients})`;
+    return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
   }
-  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
+  const background = `linear-gradient(${direction}, ${from}, ${to})`;
+  return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
 };
 
 const Line: React.FC<LineProps> = (props) => {
@@ -84,20 +85,13 @@ const Line: React.FC<LineProps> = (props) => {
     success,
   } = props;
 
-  const { direction } = useContext(ConfigContext);
-
-  const backgroundProps: React.CSSProperties =
+  const backgroundProps =
     strokeColor && typeof strokeColor !== 'string'
       ? handleGradient(strokeColor, directionConfig)
-      : { backgroundColor: strokeColor };
+      : { [LineStrokeColorVar]: strokeColor, background: strokeColor };
 
   const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
 
-  const trailStyle: React.CSSProperties = {
-    backgroundColor: trailColor || undefined,
-    borderRadius,
-  };
-
   const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
 
   const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
@@ -108,31 +102,27 @@ const Line: React.FC<LineProps> = (props) => {
     warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
   }
 
-  const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px';
+  const trailStyle: React.CSSProperties = {
+    backgroundColor: trailColor || undefined,
+    borderRadius,
+  };
 
-  const percentStyle: React.CSSProperties = {
-    width: `100%`,
+  const percentStyle = {
+    width: `${validProgress(percent)}%`,
     height,
     borderRadius,
-    clipPath:
-      direction === 'rtl'
-        ? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})`
-        : `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`,
     ...backgroundProps,
+    [Percent]: validProgress(percent) / 100,
   };
 
   const successPercent = getSuccessPercent(props);
 
-  const successPercentStyle: React.CSSProperties = {
-    width: `100%`,
+  const successPercentStyle = {
+    width: `${validProgress(successPercent)}%`,
     height,
     borderRadius,
-    clipPath:
-      direction === 'rtl'
-        ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})`
-        : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`,
     backgroundColor: success?.strokeColor,
-  };
+  } as React.CSSProperties;
 
   const outerStyle: React.CSSProperties = {
     width: width < 0 ? '100%' : width,

components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -533,7 +533,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 8px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -562,7 +562,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 6px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -591,7 +591,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 20px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -1275,7 +1275,7 @@ Array [
         >
           <div
             class="ant-progress-bg"
-            style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+            style="width: 0%; height: 8px; --progress-percent: 0;"
           />
         </div>
       </div>
@@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 0.09999999999999432% 0 0 round 100px);"
+          style="width: 99.9%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.9990000000000001;"
         />
       </div>
     </div>
@@ -1572,7 +1572,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2104,7 +2104,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 8px; --progress-percent: 0.3;"
         />
       </div>
     </div>
@@ -2129,7 +2129,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2154,7 +2154,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 30% 0 0 round 100px);"
+          style="width: 70%; height: 8px; --progress-percent: 0.7;"
         />
       </div>
     </div>
@@ -2197,7 +2197,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
+          style="width: 100%; height: 8px; --progress-percent: 1;"
         />
       </div>
     </div>
@@ -2239,7 +2239,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 8px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 6px; --progress-percent: 0.3;"
         />
       </div>
     </div>
@@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+          style="width: 50%; height: 6px; --progress-percent: 0.5;"
         />
       </div>
     </div>
@@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 30% 0 0 round 100px);"
+          style="width: 70%; height: 6px; --progress-percent: 0.7;"
         />
       </div>
     </div>
@@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 6px; clip-path: inset(0 0% 0 0 round 100px);"
+          style="width: 100%; height: 6px; --progress-percent: 1;"
         />
       </div>
     </div>
@@ -2410,7 +2410,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 0);"
+          style="width: 75%; height: 8px; border-radius: 0; --progress-percent: 0.75;"
         />
       </div>
     </div>
@@ -2559,11 +2559,11 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
+          style="width: 60%; height: 8px; --progress-percent: 0.6;"
         />
         <div
           class="ant-progress-success-bg"
-          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
+          style="width: 30%; height: 8px;"
         />
       </div>
     </div>
@@ -2775,7 +2775,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 8px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -2804,7 +2804,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 6px; --progress-percent: 0.5;"
             />
           </div>
         </div>
@@ -2833,7 +2833,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
+              style="width: 50%; height: 20px; --progress-percent: 0.5;"
             />
           </div>
         </div>

components/progress/__tests__/__snapshots__/demo.test.ts.snap

@@ -503,7 +503,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:8px;--progress-percent:0.5"
             />
           </div>
         </div>
@@ -532,7 +532,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:6px;--progress-percent:0.5"
             />
           </div>
         </div>
@@ -561,7 +561,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:20px;--progress-percent:0.5"
             />
           </div>
         </div>
@@ -1193,7 +1193,7 @@ Array [
         >
           <div
             class="ant-progress-bg"
-            style="width:100%;height:8px;clip-path:inset(0 100% 0 0 round 100px)"
+            style="width:0%;height:8px;--progress-percent:0"
           />
         </div>
       </div>
@@ -1461,7 +1461,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 0.09999999999999432% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+          style="width:99.9%;height:8px;background:linear-gradient(to right, #108ee9 0%, #87d068 100%);--progress-line-stroke-color:linear-gradient(to right, #108ee9 0%, #87d068 100%);--progress-percent:0.9990000000000001"
         />
       </div>
     </div>
@@ -1486,7 +1486,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9, #87d068)"
+          style="width:50%;height:8px;background:linear-gradient(to right, #108ee9, #87d068);--progress-line-stroke-color:linear-gradient(to right, #108ee9, #87d068);--progress-percent:0.5"
         />
       </div>
     </div>
@@ -2016,7 +2016,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
+          style="width:30%;height:8px;--progress-percent:0.3"
         />
       </div>
     </div>
@@ -2041,7 +2041,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
+          style="width:50%;height:8px;--progress-percent:0.5"
         />
       </div>
     </div>
@@ -2066,7 +2066,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 30% 0 0 round 100px)"
+          style="width:70%;height:8px;--progress-percent:0.7"
         />
       </div>
     </div>
@@ -2109,7 +2109,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 0% 0 0 round 100px)"
+          style="width:100%;height:8px;--progress-percent:1"
         />
       </div>
     </div>
@@ -2151,7 +2151,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
+          style="width:50%;height:8px;--progress-percent:0.5"
         />
       </div>
     </div>
@@ -2177,7 +2177,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;clip-path:inset(0 70% 0 0 round 100px)"
+          style="width:30%;height:6px;--progress-percent:0.3"
         />
       </div>
     </div>
@@ -2202,7 +2202,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
+          style="width:50%;height:6px;--progress-percent:0.5"
         />
       </div>
     </div>
@@ -2227,7 +2227,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;clip-path:inset(0 30% 0 0 round 100px)"
+          style="width:70%;height:6px;--progress-percent:0.7"
         />
       </div>
     </div>
@@ -2270,7 +2270,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;clip-path:inset(0 0% 0 0 round 100px)"
+          style="width:100%;height:6px;--progress-percent:1"
         />
       </div>
     </div>
@@ -2318,7 +2318,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 0)"
+          style="width:75%;height:8px;border-radius:0;--progress-percent:0.75"
         />
       </div>
     </div>
@@ -2465,11 +2465,11 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;clip-path:inset(0 40% 0 0 round 100px)"
+          style="width:60%;height:8px;--progress-percent:0.6"
         />
         <div
           class="ant-progress-success-bg"
-          style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
+          style="width:30%;height:8px"
         />
       </div>
     </div>
@@ -2622,7 +2622,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:8px;--progress-percent:0.5"
             />
           </div>
         </div>
@@ -2651,7 +2651,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:6px;--progress-percent:0.5"
             />
           </div>
         </div>
@@ -2680,7 +2680,7 @@ Array [
           >
             <div
               class="ant-progress-bg"
-              style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
+              style="width:50%;height:20px;--progress-percent:0.5"
             />
           </div>
         </div>

components/progress/__tests__/__snapshots__/index.test.tsx.snap

@@ -180,11 +180,11 @@ exports[`Progress render format 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+        style="width: 50%; height: 8px; --progress-percent: 0.5;"
       />
       <div
         class="ant-progress-success-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 90% 0 0 round 100px);"
+        style="width: 10%; height: 8px;"
       />
     </div>
   </div>
@@ -212,7 +212,7 @@ exports[`Progress render negative progress 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -240,11 +240,11 @@ exports[`Progress render negative successPercent 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+        style="width: 50%; height: 8px; --progress-percent: 0.5;"
       />
       <div
         class="ant-progress-success-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px;"
       />
     </div>
   </div>
@@ -272,7 +272,7 @@ exports[`Progress render normal progress 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -300,7 +300,7 @@ exports[`Progress render out-of-range progress 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
+        style="width: 100%; height: 8px; --progress-percent: 1;"
       />
     </div>
   </div>
@@ -345,7 +345,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
+        style="width: 100%; height: 8px; --progress-percent: 1;"
       />
     </div>
   </div>
@@ -445,7 +445,7 @@ exports[`Progress render strokeColor 2`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
       />
     </div>
   </div>
@@ -473,7 +473,7 @@ exports[`Progress render strokeColor 3`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
+        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.5;"
       />
     </div>
   </div>
@@ -558,11 +558,11 @@ exports[`Progress render successColor progress 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
+        style="width: 60%; height: 8px; --progress-percent: 0.6;"
       />
       <div
         class="ant-progress-success-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px); background-color: rgb(255, 255, 255);"
+        style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
       />
     </div>
   </div>
@@ -701,7 +701,7 @@ exports[`Progress render trailColor progress 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>
@@ -729,7 +729,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
     >
       <div
         class="ant-progress-bg"
-        style="width: 100%; height: 8px; clip-path: inset(0 0 0 100% round 100px);"
+        style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
   </div>

components/progress/__tests__/index.test.tsx

@@ -137,11 +137,11 @@ describe('Progress', () => {
   });
 
   it('get correct line-gradient', () => {
-    expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe(
+    expect(handleGradient({ from: 'test', to: 'test' }).background).toBe(
       'linear-gradient(to right, test, test)',
     );
-    expect(handleGradient({}).backgroundImage).toBe('linear-gradient(to right, #1677FF, #1677FF)');
-    expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).backgroundImage).toBe(
+    expect(handleGradient({}).background).toBe('linear-gradient(to right, #1677FF, #1677FF)');
+    expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).background).toBe(
       'linear-gradient(to right, test 0%)',
     );
   });

components/progress/style/index.ts

@@ -37,6 +37,9 @@ export interface ComponentToken {
   circleIconFontSize: string;
 }
 
+export const LineStrokeColorVar = '--progress-line-stroke-color';
+export const Percent = '--progress-percent';
+
 interface ProgressToken extends FullToken<'Progress'> {
   progressStepMinWidth: number | string;
   progressStepMarginInlineEnd: number | string;
@@ -112,11 +115,26 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
 
       [`${progressCls}-success-bg, ${progressCls}-bg`]: {
         position: 'relative',
-        backgroundColor: token.defaultColor,
+        background: token.defaultColor,
         borderRadius: token.lineBorderRadius,
         transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
       },
 
+      [`${progressCls}-bg`]: {
+        overflow: 'hidden',
+
+        '&::after': {
+          content: '""',
+          background: {
+            _multi_value_: true,
+            value: ['inherit', `var(${LineStrokeColorVar})`],
+          },
+          height: '100%',
+          width: `calc(1 / var(${Percent}) * 100%)`,
+          display: 'block',
+        },
+      },
+
       [`${progressCls}-success-bg`]: {
         position: 'absolute',
         insetBlockStart: 0,