feat: ConfigProvider support classNames and styles for Progress (#53535)

* chore: init demo * chore: circle * docs: update * test: update test case * test: coverage * docs: update docs * docs: deprecated trailColor * chore: bump rail * chore: misc * chore: fix style * chore: move pos * chore: refactor structrue * test: fix test case * test: update snapshot * test: fix test case * chore: rm style * test: update snapshot * test: update snapshot * chore: fix steps style
2026-02-09 02:49:18 +08:00 · 2025-04-17 19:59:48 +08:00
parent 364b6f3134
commit 9ba92353cf
25 changed files with 1445 additions and 1034 deletions
--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.dumi/pages/index/components/ComponentsList.tsx
@@ -187,7 +187,7 @@ const ComponentsList: React.FC = () => {
        node: (
          <Flex gap="small" vertical>
            <Flex gap="small" align="center">
-              <Progress type="circle" trailColor="#e6f4ff" percent={60} size={14} />
+              <Progress type="circle" railColor="#e6f4ff" percent={60} size={14} />
              {locale.inProgress}
            </Flex>
            <Flex gap="small" align="center">
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@@ -21861,19 +21861,20 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
  role="progressbar"
 >
  <div
-    class="config-progress-outer"
+    class="config-progress-body"
    style="width: 100%;"
  >
    <div
-      class="config-progress-inner"
+      class="config-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="config-progress-bg config-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="config-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="config-progress-text config-progress-text-end config-progress-text-outer"
+      class="config-progress-indicator config-progress-indicator-end config-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -21891,19 +21892,20 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
  role="progressbar"
 >
  <div
-    class="config-progress-outer"
+    class="config-progress-body"
    style="width: 100%;"
  >
    <div
-      class="config-progress-inner"
+      class="config-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="config-progress-bg config-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="config-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="config-progress-text config-progress-text-end config-progress-text-outer"
+      class="config-progress-indicator config-progress-indicator-end config-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -21921,19 +21923,20 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
  role="progressbar"
 >
  <div
-    class="config-progress-outer"
+    class="config-progress-body"
    style="width: 100%;"
  >
    <div
-      class="config-progress-inner"
+      class="config-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="config-progress-bg config-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="config-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="config-progress-text config-progress-text-end config-progress-text-outer"
+      class="config-progress-indicator config-progress-indicator-end config-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -21951,19 +21954,20 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
  role="progressbar"
 >
  <div
-    class="config-progress-outer"
+    class="config-progress-body"
    style="width: 100%;"
  >
    <div
-      class="config-progress-inner"
+      class="config-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="config-progress-bg config-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="config-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="config-progress-text config-progress-text-end config-progress-text-outer"
+      class="config-progress-indicator config-progress-indicator-end config-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -21981,19 +21985,20 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
  role="progressbar"
 >
  <div
-    class="config-progress-outer"
+    class="config-progress-body"
    style="width: 100%;"
  >
    <div
-      class="config-progress-inner"
+      class="config-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="config-progress-bg config-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="config-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="config-progress-text config-progress-text-end config-progress-text-outer"
+      class="config-progress-indicator config-progress-indicator-end config-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -22011,19 +22016,20 @@ exports[`ConfigProvider components Progress normal 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="ant-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -22041,19 +22047,20 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
  role="progressbar"
 >
  <div
-    class="prefix-Progress-outer"
+    class="prefix-Progress-body"
    style="width: 100%;"
  >
    <div
-      class="prefix-Progress-inner"
+      class="prefix-Progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="prefix-Progress-bg prefix-Progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="prefix-Progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="prefix-Progress-text prefix-Progress-text-end prefix-Progress-text-outer"
+      class="prefix-Progress-indicator prefix-Progress-indicator-end prefix-Progress-indicator-outer"
      title="0%"
    >
      0%
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -37,6 +37,7 @@ import type { ArgsProps as NotificationProps } from '../notification';
 import type { PaginationProps } from '../pagination';
 import type { PopconfirmProps } from '../popconfirm';
 import type { PopoverProps } from '../popover';
+import type { ProgressProps } from '../progress';
 import type { QRCodeProps } from '../qr-code';
 import type { RadioProps } from '../radio';
 import type { ResultProps } from '../result';
@@ -252,6 +253,8 @@ export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
 export type PaginationConfig = ComponentStyleConfig &
  Pick<PaginationProps, 'showSizeChanger' | 'classNames' | 'styles'>;

+export type ProgressConfig = ComponentStyleConfig & Pick<ProgressProps, 'classNames' | 'styles'>;
+
 export type SelectConfig = ComponentStyleConfig &
  Pick<SelectProps, 'showSearch' | 'variant' | 'classNames' | 'styles'>;

@@ -372,7 +375,7 @@ export interface ConfigComponentProps {
  list?: ListConfig;
  mentions?: MentionsConfig;
  modal?: ModalConfig;
-  progress?: ComponentStyleConfig;
+  progress?: ProgressConfig;
  result?: ResultConfig;
  slider?: SliderConfig;
  breadcrumb?: BreadcrumbConfig;
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -145,7 +145,7 @@ const {
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal#semantic-dom), styles?: [ModalProps\["styles"\]](/components/modal#semantic-dom), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | notification | Set Notification common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode, classNames?: [NotificationConfig\["classNames"\]](/components/notification#semantic-dom), styles?: [NotificationConfig\["styles"\]](/components/notification#semantic-dom) } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` and `styles`: 6.0.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties,classNames?:[PaginationConfig\["classNames"\]](/components/pagination#semantic-dom), styles?: [PaginationConfig\["styles"\]](/components/pagination#semantic-dom) } | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
-| progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| progress | Set Progress common props | { className?: string, style?: React.CSSProperties, classNames?: [ProgressConfig\["classNames"\]](/components/progress#semantic-dom), styles?: [ProgressConfig\["styles"\]](/components/progress#semantic-dom) } | - |  |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties, classNames?: [RadioConfig\["classNames"\]](/components/radio#semantic-dom), styles?: [RadioConfig\["styles"\]](/components/radio#semantic-dom) } | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
 | rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties , classNames?: [ResultProps\["classNames"\]](/components/result#semantic-dom), styles?: [ResultProps\["styles"\]](/components/result#semantic-dom)} | - | 5.7.0, `classNames` and `styles`: 6.0.0 |
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -147,7 +147,7 @@ const {
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#semantic-dom), styles?: [ModalProps\["styles"\]](/components/modal-cn#semantic-dom), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode, classNames?: [NotificationConfig\["classNames"\]](/components/notification-cn#semantic-dom), styles?: [NotificationConfig\["styles"\]](/components/notification-cn#semantic-dom) } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` 和 `styles`: 6.0.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties,classNames?:[PaginationConfig\["classNames"\]](/components/pagination-cn#semantic-dom), styles?: [PaginationConfig\["styles"\]](/components/pagination-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0 |
-| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ProgressConfig\["classNames"\]](/components/progress#semantic-dom), styles?: [ProgressConfig\["styles"\]](/components/progress#semantic-dom) } | - |  |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [RadioConfig\["classNames"\]](/components/radio-cn#semantic-dom), styles?: [RadioConfig\["styles"\]](/components/radio-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0 |
 | rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ResultProps\["classNames"\]](/components/result-cn#semantic-dom), styles?: [ResultProps\["styles"\]](/components/result-cn#semantic-dom) } | - | 5.7.0, `classNames` 和 `styles`: 6.0.0 |
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import classNames from 'classnames';
-import type { ProgressProps as RcProgressProps } from 'rc-progress';
-import { Circle as RCCircle } from 'rc-progress';
+import type { ProgressProps as RcProgressProps } from '@rc-component/progress';
+import { Circle as RCCircle } from '@rc-component/progress';
+import omit from '@rc-component/util/lib/omit';
+import cls from 'classnames';

 import Tooltip from '../tooltip';
 import type { ProgressGradient, ProgressProps } from './progress';
@@ -11,17 +12,24 @@ const CIRCLE_MIN_STROKE_WIDTH = 3;

 const getMinPercent = (width: number): number => (CIRCLE_MIN_STROKE_WIDTH / width) * 100;

+const OMIT_SEMANTIC_NAMES = ['root', 'body', 'indicator'] as const;
+
 export interface CircleProps extends ProgressProps {
  prefixCls: string;
  children: React.ReactNode;
  progressStatus: string;
  strokeColor?: string | ProgressGradient;
+  classNames: Required<ProgressProps>['classNames'];
+  styles: Required<ProgressProps>['styles'];
 }

 const Circle: React.FC<CircleProps> = (props) => {
  const {
    prefixCls,
-    trailColor = null as unknown as string,
+    classNames,
+    styles,
+    railColor,
+    trailColor,
    strokeLinecap = 'round',
    gapPosition,
    gapDegree,
@@ -33,6 +41,8 @@ const Circle: React.FC<CircleProps> = (props) => {
    steps,
  } = props;

+  const mergedRailColor = railColor ?? trailColor;
+
  const [width, height] = getSize(size, 'circle');

  let { strokeWidth } = props;
@@ -60,28 +70,34 @@ const Circle: React.FC<CircleProps> = (props) => {
  const isGradient = Object.prototype.toString.call(props.strokeColor) === '[object Object]';
  const strokeColor = getStrokeColor({ success, strokeColor: props.strokeColor });

-  const wrapperClassName = classNames(`${prefixCls}-inner`, {
-    [`${prefixCls}-circle-gradient`]: isGradient,
-  });
+  const wrapperClassName = cls(
+    `${prefixCls}-body`,
+    {
+      [`${prefixCls}-circle-gradient`]: isGradient,
+    },
+    classNames.body,
+  );

  const circleContent = (
    <RCCircle
      steps={steps}
      percent={steps ? percentArray[1] : percentArray}
      strokeWidth={strokeWidth}
-      trailWidth={strokeWidth}
+      railWidth={strokeWidth}
      strokeColor={steps ? strokeColor[1] : strokeColor}
      strokeLinecap={strokeLinecap}
-      trailColor={trailColor}
+      railColor={mergedRailColor}
      prefixCls={prefixCls}
      gapDegree={realGapDegree}
      gapPosition={gapPos}
+      classNames={omit(classNames, OMIT_SEMANTIC_NAMES)}
+      styles={omit(styles, OMIT_SEMANTIC_NAMES)}
    />
  );

  const smallCircle = width <= 20;
  const node = (
-    <div className={wrapperClassName} style={circleStyle}>
+    <div className={wrapperClassName} style={{ ...circleStyle, ...styles.body }}>
      {circleContent}
      {!smallCircle && children}
    </div>
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { presetPrimaryColors } from '@ant-design/colors';
-import classNames from 'classnames';
+import cls from 'classnames';

 import { devUseWarning } from '../_util/warning';
 import type { DirectionType } from '../config-provider';
@@ -10,7 +10,7 @@ import type {
  ProgressProps,
  StringGradients,
 } from './progress';
-import { LineStrokeColorVar, Percent } from './style';
+import { LineStrokeColorVar } from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';

 interface LineProps extends ProgressProps {
@@ -18,6 +18,8 @@ interface LineProps extends ProgressProps {
  direction?: DirectionType;
  strokeColor?: string | ProgressGradient;
  percentPosition: PercentPositionType;
+  classNames: Required<ProgressProps>['classNames'];
+  styles: Required<ProgressProps>['styles'];
 }

 /**
@@ -77,6 +79,8 @@ export const handleGradient = (
 const Line: React.FC<LineProps> = (props) => {
  const {
    prefixCls,
+    classNames,
+    styles,
    direction: directionConfig,
    percent,
    size,
@@ -84,83 +88,105 @@ const Line: React.FC<LineProps> = (props) => {
    strokeColor,
    strokeLinecap = 'round',
    children,
-    trailColor = null,
+    railColor,
+    trailColor,
    percentPosition,
    success,
  } = props;

  const { align: infoAlign, type: infoPosition } = percentPosition;

-  const backgroundProps =
-    strokeColor && typeof strokeColor !== 'string'
-      ? handleGradient(strokeColor, directionConfig)
-      : { [LineStrokeColorVar]: strokeColor, background: strokeColor };
+  const mergedRailColor = railColor ?? trailColor;

  const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;

-  const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
-
-  const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
-
  if (process.env.NODE_ENV !== 'production') {
    const warning = devUseWarning('Progress');

    warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
  }

-  const trailStyle: React.CSSProperties = {
-    backgroundColor: trailColor || undefined,
+  // ========================= Size =========================
+  const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
+
+  const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
+
+  // ========================= Rail =========================
+  const railStyle: React.CSSProperties = {
+    backgroundColor: mergedRailColor || undefined,
    borderRadius,
+    height,
  };

-  const percentStyle: React.CSSProperties = {
+  // ======================== Tracks ========================
+  const trackCls = `${prefixCls}-track`;
+
+  const backgroundProps =
+    strokeColor && typeof strokeColor !== 'string'
+      ? handleGradient(strokeColor, directionConfig)
+      : { [LineStrokeColorVar]: strokeColor, background: strokeColor };
+
+  const percentTrackStyle: React.CSSProperties = {
    width: `${validProgress(percent)}%`,
    height,
    borderRadius,
    ...backgroundProps,
-    [Percent]: validProgress(percent) / 100,
  };

  const successPercent = getSuccessPercent(props);

-  const successPercentStyle: React.CSSProperties = {
+  const successTrackStyle: React.CSSProperties = {
    width: `${validProgress(successPercent)}%`,
    height,
    borderRadius,
    backgroundColor: success?.strokeColor,
  };

-  const outerStyle: React.CSSProperties = {
-    width: width < 0 ? '100%' : width,
-  };
-
-  const lineInner = (
-    <div className={`${prefixCls}-inner`} style={trailStyle}>
+  // ======================== Render ========================
+  return (
+    <div
+      className={cls(`${prefixCls}-body`, classNames.body, {
+        [`${prefixCls}-body-layout-bottom`]: infoAlign === 'center' && infoPosition === 'outer',
+      })}
+      style={{
+        width: width > 0 ? width : '100%',
+        ...styles.body,
+      }}
+    >
+      {/************** Rail **************/}
      <div
-        className={classNames(`${prefixCls}-bg`, `${prefixCls}-bg-${infoPosition}`)}
-        style={percentStyle}
+        className={cls(`${prefixCls}-rail`, classNames.rail)}
+        style={{
+          ...railStyle,
+          ...styles.rail,
+        }}
      >
-        {infoPosition === 'inner' && children}
+        {/************* Track *************/}
+        {/* Percent */}
+        <div
+          className={cls(trackCls, classNames.track)}
+          style={{
+            ...percentTrackStyle,
+            ...styles.track,
+          }}
+        >
+          {infoPosition === 'inner' && children}
+        </div>
+
+        {/* Success */}
+        {successPercent !== undefined && (
+          <div
+            className={cls(trackCls, `${trackCls}-success`, classNames.track)}
+            style={{
+              ...successTrackStyle,
+              ...styles.track,
+            }}
+          />
+        )}
      </div>
-      {successPercent !== undefined && (
-        <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
-      )}
-    </div>
-  );

-  const isOuterStart = infoPosition === 'outer' && infoAlign === 'start';
-  const isOuterEnd = infoPosition === 'outer' && infoAlign === 'end';
-
-  return infoPosition === 'outer' && infoAlign === 'center' ? (
-    <div className={`${prefixCls}-layout-bottom`}>
-      {lineInner}
-      {children}
-    </div>
-  ) : (
-    <div className={`${prefixCls}-outer`} style={outerStyle}>
-      {isOuterStart && children}
-      {lineInner}
-      {isOuterEnd && children}
+      {/* Indicator */}
+      {infoPosition === 'outer' && children}
    </div>
  );
 };
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';

 import type { ProgressProps } from './progress';
 import { getSize } from './utils';
@@ -7,18 +7,25 @@ import { getSize } from './utils';
 interface ProgressStepsProps extends ProgressProps {
  steps: number;
  strokeColor?: string | string[];
+  railColor?: string;
+  /** @deprecated Please use `railColor` instead */
  trailColor?: string;
+  classNames: Required<ProgressProps>['classNames'];
+  styles: Required<ProgressProps>['styles'];
 }

 const Steps: React.FC<ProgressStepsProps> = (props) => {
  const {
+    classNames,
+    styles,
    size,
    steps,
    rounding: customRounding = Math.round,
    percent = 0,
    strokeWidth = 8,
    strokeColor,
-    trailColor = null as any,
+    railColor,
+    trailColor,
    prefixCls,
    children,
  } = props;
@@ -28,24 +35,32 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
  const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth });
  const unitWidth = width / steps;
  const styledSteps = Array.from<React.ReactNode>({ length: steps });
+
+  const mergedRailColor = railColor ?? trailColor;
+
  for (let i = 0; i < steps; i++) {
    const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
    styledSteps[i] = (
      <div
        key={i}
-        className={classNames(`${prefixCls}-steps-item`, {
-          [`${prefixCls}-steps-item-active`]: i <= current - 1,
-        })}
+        className={cls(
+          `${prefixCls}-steps-item`,
+          {
+            [`${prefixCls}-steps-item-active`]: i <= current - 1,
+          },
+          classNames.track,
+        )}
        style={{
-          backgroundColor: i <= current - 1 ? color : trailColor,
+          backgroundColor: i <= current - 1 ? color : mergedRailColor,
          width: unitWidth,
          height,
+          ...styles.track,
        }}
      />
    );
  }
  return (
-    <div className={`${prefixCls}-steps-outer`}>
+    <div className={cls(`${prefixCls}-steps-body`, classNames.body)} style={styles.body}>
      {styledSteps}
      {children}
    </div>
--- a/components/progress/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/progress/tests/snapshots/demo-extend.test.ts.snap
--- a/components/progress/tests/snapshots/demo.test.ts.snap
+++ b/components/progress/tests/snapshots/demo.test.ts.snap
--- a/components/progress/tests/snapshots/index.test.tsx.snap
+++ b/components/progress/tests/snapshots/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Progress circle progress should accept steps 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-steps-outer"
+    class="ant-progress-steps-body"
  >
    <div
      class="ant-progress-steps-item ant-progress-steps-item-active"
@@ -32,7 +32,7 @@ exports[`Progress circle progress should accept steps 1`] = `
      style="width: 14px; height: 8px;"
    />
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="70%"
    >
      70%
@@ -50,7 +50,7 @@ exports[`Progress circle progress steps can be number 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-steps-outer"
+    class="ant-progress-steps-body"
  >
    <div
      class="ant-progress-steps-item ant-progress-steps-item-active"
@@ -73,7 +73,7 @@ exports[`Progress circle progress steps can be number 1`] = `
      style="width: 14px; height: 8px;"
    />
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="70%"
    >
      70%
@@ -91,7 +91,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -100,7 +100,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -130,7 +130,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="0%"
    >
      0%
@@ -148,7 +148,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -157,7 +157,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -187,7 +187,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="0%"
    >
      0%
@@ -205,7 +205,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -214,7 +214,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -244,7 +244,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="0%"
    >
      0%
@@ -262,23 +262,24 @@ exports[`Progress render format 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 50%; height: 8px; --progress-percent: 0.5;"
+        class="ant-progress-track"
+        style="width: 50%; height: 8px;"
      />
      <div
-        class="ant-progress-success-bg"
+        class="ant-progress-track ant-progress-track-success"
        style="width: 10%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="50 10"
    >
      50 10
@@ -296,18 +297,19 @@ exports[`Progress render inner info position 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 400px;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 20px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-inner"
-        style="width: 100%; height: 20px; --progress-percent: 1;"
+        class="ant-progress-track"
+        style="width: 100%; height: 20px;"
      >
        <span
-          class="ant-progress-text ant-progress-text-center ant-progress-text-inner"
+          class="ant-progress-indicator ant-progress-indicator-center ant-progress-indicator-inner"
          title="100%"
        >
          100%
@@ -327,19 +329,20 @@ exports[`Progress render negative progress 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="ant-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -357,23 +360,24 @@ exports[`Progress render negative successPercent 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 50%; height: 8px; --progress-percent: 0.5;"
+        class="ant-progress-track"
+        style="width: 50%; height: 8px;"
      />
      <div
-        class="ant-progress-success-bg"
+        class="ant-progress-track ant-progress-track-success"
        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="50%"
    >
      50%
@@ -391,19 +395,20 @@ exports[`Progress render normal progress 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="ant-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -421,19 +426,20 @@ exports[`Progress render out-of-range progress 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 100%; height: 8px; --progress-percent: 1;"
+        class="ant-progress-track"
+        style="width: 100%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
    >
      <span
        aria-label="check-circle"
@@ -468,19 +474,20 @@ exports[`Progress render out-of-range progress with info 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 100%; height: 8px; --progress-percent: 1;"
+        class="ant-progress-track"
+        style="width: 100%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
    >
      <span
        aria-label="check-circle"
@@ -515,7 +522,7 @@ exports[`Progress render strokeColor 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -524,7 +531,7 @@ exports[`Progress render strokeColor 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -554,7 +561,7 @@ exports[`Progress render strokeColor 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="50%"
    >
      50%
@@ -572,19 +579,20 @@ exports[`Progress render strokeColor 2`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
+        class="ant-progress-track"
+        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068);"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="50%"
    >
      50%
@@ -602,19 +610,20 @@ exports[`Progress render strokeColor 3`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.5;"
+        class="ant-progress-track"
+        style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%);"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="50%"
    >
      50%
@@ -633,7 +642,7 @@ exports[`Progress render strokeWidth of progress 1`] = `
    role="progressbar"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-body"
      style="width: 120px; height: 120px; font-size: 24px;"
    >
      <svg
@@ -642,7 +651,7 @@ exports[`Progress render strokeWidth of progress 1`] = `
        viewBox="0 0 100 100"
      >
        <circle
-          class="ant-progress-circle-trail"
+          class="ant-progress-circle-rail"
          cx="50"
          cy="50"
          r="25"
@@ -672,7 +681,7 @@ exports[`Progress render strokeWidth of progress 1`] = `
        />
      </svg>
      <span
-        class="ant-progress-text"
+        class="ant-progress-indicator"
        title="30%"
      >
        30%
@@ -691,23 +700,24 @@ exports[`Progress render successColor progress 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 60%; height: 8px; --progress-percent: 0.6;"
+        class="ant-progress-track"
+        style="width: 60%; height: 8px;"
      />
      <div
-        class="ant-progress-success-bg"
+        class="ant-progress-track ant-progress-track-success"
        style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="60%"
    >
      60%
@@ -725,7 +735,7 @@ exports[`Progress render successColor progress type="circle" 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -734,7 +744,7 @@ exports[`Progress render successColor progress type="circle" 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -764,7 +774,7 @@ exports[`Progress render successColor progress type="circle" 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="60%"
    >
      60%
@@ -782,7 +792,7 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-inner"
+    class="ant-progress-body"
    style="width: 120px; height: 120px; font-size: 24px;"
  >
    <svg
@@ -791,7 +801,7 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
      viewBox="0 0 100 100"
    >
      <circle
-        class="ant-progress-circle-trail"
+        class="ant-progress-circle-rail"
        cx="50"
        cy="50"
        r="47"
@@ -821,7 +831,7 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
      />
    </svg>
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="60%"
    >
      60%
@@ -839,20 +849,20 @@ exports[`Progress render trailColor progress 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
-      style="background-color: rgb(255, 255, 255);"
+      class="ant-progress-rail"
+      style="background-color: rgb(255, 255, 255); height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="ant-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -870,19 +880,20 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
  role="progressbar"
 >
  <div
-    class="ant-progress-outer"
+    class="ant-progress-body"
    style="width: 100%;"
  >
    <div
-      class="ant-progress-inner"
+      class="ant-progress-rail"
+      style="height: 8px;"
    >
      <div
-        class="ant-progress-bg ant-progress-bg-outer"
-        style="width: 0%; height: 8px; --progress-percent: 0;"
+        class="ant-progress-track"
+        style="width: 0%; height: 8px;"
      />
    </div>
    <span
-      class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+      class="ant-progress-indicator ant-progress-indicator-end ant-progress-indicator-outer"
      title="0%"
    >
      0%
@@ -900,7 +911,7 @@ exports[`Progress should support steps 1`] = `
  role="progressbar"
 >
  <div
-    class="ant-progress-steps-outer"
+    class="ant-progress-steps-body"
  >
    <div
      class="ant-progress-steps-item"
@@ -915,7 +926,7 @@ exports[`Progress should support steps 1`] = `
      style="width: 14px; height: 8px;"
    />
    <span
-      class="ant-progress-text"
+      class="ant-progress-indicator"
      title="0%"
    >
      0%
@@ -926,6 +937,25 @@ exports[`Progress should support steps 1`] = `

 exports[`Progress steps should have default percent 0 1`] = `
 <div
-  class="undefined-steps-outer"
-/>
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="0"
+  class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default css-var-root"
+  role="progressbar"
+>
+  <div
+    class="ant-progress-steps-body"
+  >
+    <div
+      class="ant-progress-steps-item"
+      style="width: 14px; height: 8px;"
+    />
+    <span
+      class="ant-progress-indicator"
+      title="0%"
+    >
+      0%
+    </span>
+  </div>
+</div>
 `;
--- a/components/progress/tests/index.test.tsx
+++ b/components/progress/tests/index.test.tsx
@@ -3,16 +3,21 @@ import { Tooltip } from 'antd';

 import type { ProgressProps } from '..';
 import Progress from '..';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import { handleGradient, sortGradient } from '../Line';
 import { ProgressTypes } from '../progress';
-import ProgressSteps from '../Steps';

 describe('Progress', () => {
  mountTest(Progress);
  rtlTest(Progress);
+
+  beforeEach(() => {
+    resetWarned();
+  });
+
  it('successPercent should decide the progress status when it exists', () => {
    const { container: wrapper, rerender } = render(
      <Progress percent={100} success={{ percent: 50 }} />,
@@ -97,8 +102,16 @@ describe('Progress', () => {
  });

  it('render trailColor progress', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
    const { container: wrapper } = render(<Progress status="normal" trailColor="#ffffff" />);
    expect(wrapper.firstChild).toMatchSnapshot();
+
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] `trailColor` is deprecated. Please use `railColor` instead.',
+    );
+
+    errSpy.mockRestore();
  });

  it('render successColor progress', () => {
@@ -222,7 +235,7 @@ describe('Progress', () => {
  });

  it('steps should have default percent 0', () => {
-    const { container } = render(<ProgressSteps steps={0} />);
+    const { container } = render(<Progress steps={1} />);
    expect(container.firstChild).toMatchSnapshot();
  });

@@ -329,42 +342,42 @@ describe('Progress', () => {
      width: '30px',
      height: '30px',
    });
-    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-body')[0]).toHaveStyle({
      width: '30px',
      height: '30px',
    });
-    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-body')[1]).toHaveStyle({
      width: '30px',
      height: '30px',
    });

    rerender(<App size={[60, 20]} />);

-    expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({
+    expect(container.querySelector('.ant-progress-line .ant-progress-body')).toHaveStyle({
      width: '60px',
    });
-    expect(container.querySelector('.ant-progress-line .ant-progress-bg')).toHaveStyle({
+    expect(container.querySelector('.ant-progress-line .ant-progress-rail')).toHaveStyle({
      height: '20px',
    });
    expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({
      width: '60px',
      height: '20px',
    });
-    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-body')[0]).toHaveStyle({
      width: '60px',
      height: '60px',
    });
-    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-body')[1]).toHaveStyle({
      width: '60px',
      height: '60px',
    });

    rerender(<App size={{ width: 60, height: 20 }} />);

-    expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({
+    expect(container.querySelector('.ant-progress-line .ant-progress-body')).toHaveStyle({
      width: '60px',
    });
-    expect(container.querySelector('.ant-progress-line .ant-progress-bg')).toHaveStyle({
+    expect(container.querySelector('.ant-progress-line .ant-progress-rail')).toHaveStyle({
      height: '20px',
    });
    expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({
@@ -421,7 +434,7 @@ describe('Progress', () => {
  });

  it('should show inner info position', () => {
-    const { container: wrapper, rerender } = render(
+    const { container, rerender } = render(
      <Progress
        percent={0}
        percentPosition={{ align: 'center', type: 'inner' }}
@@ -429,8 +442,8 @@ describe('Progress', () => {
      />,
    );
    expect(
-      wrapper.querySelectorAll('.ant-progress-line-align-center.ant-progress-line-position-inner'),
-    ).toHaveLength(1);
+      container.querySelector('.ant-progress-line-align-center.ant-progress-line-position-inner'),
+    ).toBeTruthy();

    rerender(
      <Progress
@@ -439,10 +452,10 @@ describe('Progress', () => {
        size={[400, 20]}
      />,
    );
-    expect(wrapper.querySelectorAll('.ant-progress-text-inner')).toHaveLength(1);
+    expect(container.querySelector('.ant-progress-indicator-inner')).toBeTruthy();

    rerender(<Progress percent={100} percentPosition={{ align: 'center', type: 'outer' }} />);
-    expect(wrapper.querySelectorAll('.ant-progress-layout-bottom')).toHaveLength(1);
+    expect(container.querySelector('.ant-progress-body-layout-bottom')).toBeTruthy();
  });

  it('render inner info position', () => {
--- a/components/progress/tests/semantic.test.tsx
+++ b/components/progress/tests/semantic.test.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+
+import Progress from '..';
+import type { ProgressProps } from '..';
+import { render } from '../../../tests/utils';
+
+describe('Progress.Semantic', () => {
+  it('Line', () => {
+    const classNames: Required<ProgressProps['classNames']> = {
+      root: 'my-root',
+      body: 'my-body',
+      rail: 'my-rail',
+      track: 'my-track',
+      indicator: 'my-indicator',
+    };
+
+    const styles = {
+      root: { backgroundColor: 'red' },
+      body: { backgroundColor: 'blue' },
+      rail: { backgroundColor: 'green' },
+      track: { backgroundColor: 'yellow' },
+      indicator: { backgroundColor: 'purple' },
+    };
+
+    const { container } = render(
+      <Progress percent={100} success={{ percent: 50 }} classNames={classNames} styles={styles} />,
+    );
+
+    expect(container.querySelector(`.ant-progress`)).toHaveClass(classNames.root);
+    expect(container.querySelector(`.ant-progress-body`)).toHaveClass(classNames.body);
+    expect(container.querySelector(`.ant-progress-rail`)).toHaveClass(classNames.rail);
+    expect(container.querySelector(`.ant-progress-track`)).toHaveClass(classNames.track);
+    expect(container.querySelector(`.ant-progress-indicator`)).toHaveClass(classNames.indicator);
+
+    expect(container.querySelector(`.${classNames.root}`)).toHaveStyle(styles.root);
+    expect(container.querySelector(`.${classNames.body}`)).toHaveStyle(styles.body);
+    expect(container.querySelector(`.${classNames.rail}`)).toHaveStyle(styles.rail);
+    expect(container.querySelector(`.${classNames.track}`)).toHaveStyle(styles.track);
+    expect(container.querySelector(`.${classNames.indicator}`)).toHaveStyle(styles.indicator);
+  });
+
+  it('Steps', () => {
+    const classNames = {
+      root: 'my-root',
+      body: 'my-body',
+      track: 'my-track',
+      indicator: 'my-indicator',
+    } as Required<NonNullable<ProgressProps['classNames']>>;
+
+    const styles = {
+      root: { backgroundColor: 'red' },
+      body: { backgroundColor: 'blue' },
+      track: { backgroundColor: 'yellow' },
+      indicator: { backgroundColor: 'purple' },
+    };
+
+    const { container } = render(
+      <Progress
+        steps={5}
+        percent={100}
+        success={{ percent: 50 }}
+        classNames={classNames}
+        styles={styles}
+      />,
+    );
+
+    expect(container.querySelector(`.ant-progress`)).toHaveClass(classNames.root);
+    expect(container.querySelector(`.ant-progress-steps-body`)).toHaveClass(classNames.body);
+    expect(container.querySelector(`.ant-progress-steps-item`)).toHaveClass(classNames.track);
+    expect(container.querySelector(`.ant-progress-indicator`)).toHaveClass(classNames.indicator);
+
+    expect(container.querySelector(`.${classNames.root}`)).toHaveStyle(styles.root);
+    expect(container.querySelector(`.${classNames.body}`)).toHaveStyle(styles.body);
+    expect(container.querySelector(`.${classNames.track}`)).toHaveStyle(styles.track);
+    expect(container.querySelector(`.${classNames.indicator}`)).toHaveStyle(styles.indicator);
+  });
+
+  it('Circle', () => {
+    const classNames: Required<ProgressProps['classNames']> = {
+      root: 'my-root',
+      body: 'my-body',
+      rail: 'my-rail',
+      track: 'my-track',
+      indicator: 'my-indicator',
+    };
+
+    const styles = {
+      root: { backgroundColor: 'red' },
+      body: { backgroundColor: 'blue' },
+      rail: { backgroundColor: 'green' },
+      track: { backgroundColor: 'yellow' },
+      indicator: { backgroundColor: 'purple' },
+    };
+
+    const { container } = render(
+      <Progress
+        percent={100}
+        type="circle"
+        success={{ percent: 50 }}
+        classNames={classNames}
+        styles={styles}
+      />,
+    );
+
+    expect(container.querySelector(`.ant-progress`)).toHaveClass(classNames.root);
+    expect(container.querySelector(`.ant-progress-body`)).toHaveClass(classNames.body);
+    expect(container.querySelector(`.ant-progress-circle-rail`)).toHaveClass(classNames.rail);
+    expect(container.querySelector(`.ant-progress-circle-path`)).toHaveClass(classNames.track);
+    expect(container.querySelector(`.ant-progress-indicator`)).toHaveClass(classNames.indicator);
+
+    expect(container.querySelector(`.${classNames.root}`)).toHaveStyle(styles.root);
+    expect(container.querySelector(`.${classNames.body}`)).toHaveStyle(styles.body);
+    expect(container.querySelector(`.${classNames.rail}`)).toHaveStyle(styles.rail);
+    expect(container.querySelector(`.${classNames.track}`)).toHaveStyle(styles.track);
+    expect(container.querySelector(`.${classNames.indicator}`)).toHaveStyle(styles.indicator);
+  });
+});
--- a/components/progress/demo/_semantic.tsx
+++ b/components/progress/demo/_semantic.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Flex, Progress, Segmented, Switch } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根元素',
+    body: '主体元素',
+    rail: '导轨元素，steps 模式下没有该元素',
+    track: '轨迹元素',
+    indicator: '指示器元素',
+  },
+  en: {
+    root: 'Root element',
+    body: 'Body element',
+    rail: 'Rail element. Not exist in steps mode',
+    track: 'Track element',
+    indicator: 'Indicator element',
+  },
+};
+
+const colorMap = {
+  '0%': '#108ee9',
+  '100%': '#87d068',
+};
+
+const Block = (props: object) => {
+  const [gradient, setGradient] = React.useState(false);
+  const [type, setType] = React.useState('line');
+
+  const progressProps: any = {
+    type: type === 'steps' ? 'line' : type,
+    steps: type === 'steps' ? 5 : undefined,
+  };
+
+  return (
+    <Flex vertical gap="middle" style={{ width: '100%' }} align="center">
+      <Flex align="center" gap="middle">
+        <Segmented
+          options={['line', 'steps', 'circle', 'dashboard']}
+          value={type}
+          onChange={(value) => setType(value)}
+        />
+        <Switch
+          checked={gradient}
+          value={gradient}
+          onChange={() => setGradient(!gradient)}
+          checkedChildren="Gradient"
+          unCheckedChildren="Gradient"
+        />
+      </Flex>
+      <Flex vertical align="center" style={{ height: 200, width: '100%' }}>
+        <Progress
+          percent={80}
+          {...props}
+          {...progressProps}
+          strokeColor={gradient ? colorMap : undefined!}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      componentName="Progress"
+      semantics={[
+        { name: 'root', desc: locale.root },
+        { name: 'body', desc: locale.body },
+        { name: 'rail', desc: locale.rail },
+        { name: 'track', desc: locale.track },
+        { name: 'indicator', desc: locale.indicator },
+      ]}
+    >
+      <Block />
+    </SemanticPreview>
+  );
+};
+
+export default App;
--- a/components/progress/demo/circle-micro.tsx
+++ b/components/progress/demo/circle-micro.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => (
  <Flex align="center" gap="small">
    <Progress
      type="circle"
-      trailColor="#e6f4ff"
+      railColor="#e6f4ff"
      percent={60}
      strokeWidth={20}
      size={14}
--- a/components/progress/demo/circle-steps.tsx
+++ b/components/progress/demo/circle-steps.tsx
@@ -15,14 +15,14 @@ const App: React.FC = () => {
          type="dashboard"
          steps={8}
          percent={50}
-          trailColor="rgba(0, 0, 0, 0.06)"
+          railColor="rgba(0, 0, 0, 0.06)"
          strokeWidth={20}
        />
        <Progress
          type="circle"
          percent={100}
          steps={{ count: stepsCount, gap: stepsGap }}
-          trailColor="rgba(0, 0, 0, 0.06)"
+          railColor="rgba(0, 0, 0, 0.06)"
          strokeWidth={20}
        />
      </Flex>
--- a/components/progress/design/demo/content.tsx
+++ b/components/progress/design/demo/content.tsx
@@ -7,7 +7,7 @@ const Demo = () => {
  return (
    <Flex gap="large">
      <Flex gap="small" align="center">
-        <Progress size={16} type="circle" percent={68} trailColor={token.colorPrimaryBg} />
+        <Progress size={16} type="circle" percent={68} railColor={token.colorPrimaryBg} />
        <div>进行中</div>
      </Flex>
      <Flex gap="small" align="center">
@@ -20,7 +20,7 @@ const Demo = () => {
          type="circle"
          percent={68}
          status="exception"
-          trailColor={token.colorErrorBg}
+          railColor={token.colorErrorBg}
        />
        <div>错误/异常</div>
      </Flex>
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -43,14 +43,17 @@ Properties that shared by all types.

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
 | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | - |
 | percent | To set the completion percentage | number | 0 | - |
+| railColor | The color of unfilled part | string | - | - |
 | showInfo | Whether to display the progress value and the status icon | boolean | true |
 | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeColor | The color of progress bar | string | - | - |
 | strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - |
+| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | - |
-| trailColor | The color of unfilled part | string | - | - |
+| ~~trailColor~~ | The color of unfilled part. Please use `railColor` instead | string | - | - |
 | type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
 | size | Progress size | number \| \[number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |

@@ -80,6 +83,10 @@ Properties that shared by all types.
 | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
 | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |

+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token

 <ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -44,14 +44,17 @@ demo:

 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
 | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | - |
 | percent | 百分比 | number | 0 | - |
+| railColor | 未完成的分段的颜色 | string | - | - |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
 | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | - |
 | strokeColor | 进度条的色彩 | string | - | - |
 | strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - |
+| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
-| trailColor | 未完成的分段的颜色 | string | - | - |
+| ~~trailColor~~ | 未完成的分段的颜色。已废弃，请使用 `railColor` | string | - | - |
 | type | 类型，可选 `line` `circle` `dashboard` | string | `line` | - |
 | size | 进度条的尺寸 | number \| \[number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |

@@ -81,6 +84,10 @@ demo:
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |

+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）

 <ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -5,17 +5,19 @@ import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import omit from '@rc-component/util/lib/omit';
-import classNames from 'classnames';
+import cls from 'classnames';

+import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import { devUseWarning } from '../_util/warning';
-import type { ConfigConsumerProps } from '../config-provider';
-import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import Circle from './Circle';
 import Line from './Line';
 import Steps from './Steps';
 import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';

+export type SemanticName = 'root' | 'body' | 'rail' | 'track' | 'indicator';
+
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
 export type ProgressType = (typeof ProgressTypes)[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
@@ -39,6 +41,9 @@ export interface ProgressProps extends ProgressAriaProps {
  prefixCls?: string;
  className?: string;
  rootClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+
  type?: ProgressType;
  percent?: number;
  format?: (percent?: number, successPercent?: number) => React.ReactNode;
@@ -47,7 +52,9 @@ export interface ProgressProps extends ProgressAriaProps {
  strokeWidth?: number;
  strokeLinecap?: 'butt' | 'square' | 'round';
  strokeColor?: string | string[] | ProgressGradient;
+  /** @deprecated Please use `railColor` instead */
  trailColor?: string;
+  railColor?: string;
  /** @deprecated Use `size` instead */
  width?: number;
  success?: SuccessProps;
@@ -66,6 +73,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    prefixCls: customizePrefixCls,
    className,
    rootClassName,
+    classNames,
+    styles,
    steps,
    strokeColor,
    percent = 0,
@@ -79,6 +88,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    ...restProps
  } = props;

+  // ========================= MISC =========================
  const { align: infoAlign = 'end', type: infoPosition = 'outer' } = percentPosition;
  const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor;
  const strokeColorNotGradient =
@@ -109,14 +119,26 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    return status || 'normal';
  }, [status, percentNumber]);

+  // ======================= Context ========================
  const {
    getPrefixCls,
    direction,
-    progress: progressStyle,
-  } = React.useContext<ConfigConsumerProps>(ConfigContext);
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
+  } = useComponentConfig('progress');
+
  const prefixCls = getPrefixCls('progress', customizePrefixCls);
  const [hashId, cssVarCls] = useStyle(prefixCls);

+  // ======================== Styles ========================
+  const [mergedClassNames, mergedStyles] = useMergeSemantic(
+    [contextClassNames, classNames],
+    [contextStyles, styles],
+  );
+
+  // ========================= Info =========================
  const isLineType = type === 'line';
  const isPureLineType = isLineType && !steps;
  const progressInfo = React.useMemo<React.ReactNode>(() => {
@@ -141,11 +163,16 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>

    return (
      <span
-        className={classNames(`${prefixCls}-text`, {
-          [`${prefixCls}-text-bright`]: isBrightInnerColor,
-          [`${prefixCls}-text-${infoAlign}`]: isPureLineType,
-          [`${prefixCls}-text-${infoPosition}`]: isPureLineType,
-        })}
+        className={cls(
+          `${prefixCls}-indicator`,
+          {
+            [`${prefixCls}-indicator-bright`]: isBrightInnerColor,
+            [`${prefixCls}-indicator-${infoAlign}`]: isPureLineType,
+            [`${prefixCls}-indicator-${infoPosition}`]: isPureLineType,
+          },
+          mergedClassNames.indicator,
+        )}
+        style={mergedStyles.indicator}
        title={typeof text === 'string' ? text : undefined}
      >
        {text}
@@ -158,6 +185,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>

    warning.deprecated(!('width' in props), 'width', 'size');

+    warning.deprecated(!props.trailColor, 'trailColor', 'railColor');
+
    if (type === 'circle' || type === 'dashboard') {
      if (Array.isArray(size)) {
        warning(
@@ -175,12 +204,19 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    }
  }

+  // ======================== Render ========================
+  const sharedProps = {
+    ...props,
+    classNames: mergedClassNames,
+    styles: mergedStyles,
+  };
+
  let progress: React.ReactNode;
  // Render progress shape
  if (type === 'line') {
    progress = steps ? (
      <Steps
-        {...props}
+        {...sharedProps}
        strokeColor={strokeColorNotGradient}
        prefixCls={prefixCls}
        steps={typeof steps === 'object' ? steps.count : steps}
@@ -189,7 +225,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
      </Steps>
    ) : (
      <Line
-        {...props}
+        {...sharedProps}
        strokeColor={strokeColorNotArray}
        prefixCls={prefixCls}
        direction={direction}
@@ -204,7 +240,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  } else if (type === 'circle' || type === 'dashboard') {
    progress = (
      <Circle
-        {...props}
+        {...sharedProps}
        strokeColor={strokeColorNotArray}
        prefixCls={prefixCls}
        progressStatus={progressStatus}
@@ -214,7 +250,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
    );
  }

-  const classString = classNames(
+  const classString = cls(
    prefixCls,
    `${prefixCls}-status-${progressStatus}`,
    {
@@ -228,9 +264,10 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
      [`${prefixCls}-${size}`]: typeof size === 'string',
      [`${prefixCls}-rtl`]: direction === 'rtl',
    },
-    progressStyle?.className,
+    contextClassName,
    className,
    rootClassName,
+    mergedClassNames.root,
    hashId,
    cssVarCls,
  );
@@ -238,13 +275,14 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  return (
    <div
      ref={ref}
-      style={{ ...progressStyle?.style, ...style }}
+      style={{ ...contextStyle, ...mergedStyles.root, ...style }}
      className={classString}
      role="progressbar"
      aria-valuenow={percentNumber}
      aria-valuemin={0}
      aria-valuemax={100}
      {...omit(restProps, [
+        'railColor',
        'trailColor',
        'strokeWidth',
        'width',
--- a/components/progress/style/index.ts
+++ b/components/progress/style/index.ts
@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import { Keyframes, unit } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';

 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -39,7 +39,6 @@ export interface ComponentToken {
 }

 export const LineStrokeColorVar = '--progress-line-stroke-color';
-export const Percent = '--progress-percent';

 /**
 * @desc Progress 组件的 Token
@@ -81,6 +80,9 @@ const genAntProgressActive = (isRtl?: boolean) => {
  });
 };

+// ====================================================================
+// ==                              Base                              ==
+// ====================================================================
 const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  const { componentCls: progressCls, iconCls: iconPrefixCls } = token;

@@ -88,203 +90,171 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
    [progressCls]: {
      ...resetComponent(token),

-      display: 'inline-block',
+      display: 'inline-flex',

      '&-rtl': {
        direction: 'rtl',
      },

-      '&-line': {
-        position: 'relative',
-        width: '100%',
-        fontSize: token.fontSize,
-      },
-
-      [`${progressCls}-outer`]: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        width: '100%',
-      },
-
-      [`${progressCls}-inner`]: {
-        position: 'relative',
-        display: 'inline-block',
-        width: '100%',
-        flex: 1,
-        overflow: 'hidden',
-        verticalAlign: 'middle',
-        backgroundColor: token.remainingColor,
-        borderRadius: token.lineBorderRadius,
-      },
-
-      [`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
-        [`${progressCls}-circle-path`]: {
-          stroke: token.defaultColor,
-        },
-      },
-
-      [`${progressCls}-success-bg, ${progressCls}-bg`]: {
-        position: 'relative',
-        background: token.defaultColor,
-        borderRadius: token.lineBorderRadius,
-        transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
-      },
-
-      [`${progressCls}-layout-bottom`]: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        [`${progressCls}-text`]: {
-          width: 'max-content',
-          marginInlineStart: 0,
-          marginTop: token.marginXXS,
-        },
-      },
-
-      [`${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}-bg-inner`]: {
-          minWidth: 'max-content',
-          '&::after': {
-            content: 'none',
-          },
-          [`${progressCls}-text-inner`]: {
-            color: token.colorWhite,
-            [`&${progressCls}-text-bright`]: {
-              color: 'rgba(0, 0, 0, 0.45)',
-            },
-          },
-        },
-      },
-
-      [`${progressCls}-success-bg`]: {
-        position: 'absolute',
-        insetBlockStart: 0,
-        insetInlineStart: 0,
-        backgroundColor: token.colorSuccess,
-      },
-
-      [`${progressCls}-text`]: {
-        display: 'inline-block',
-        marginInlineStart: token.marginXS,
+      [`${progressCls}-indicator`]: {
        color: token.colorText,
        lineHeight: 1,
-        width: '2em',
        whiteSpace: 'nowrap',
-        textAlign: 'start',
        verticalAlign: 'middle',
        wordBreak: 'normal',
        [iconPrefixCls]: {
          fontSize: token.fontSize,
        },
-        [`&${progressCls}-text-outer`]: {
-          width: 'max-content',
-        },
-        [`&${progressCls}-text-outer${progressCls}-text-start`]: {
-          width: 'max-content',
-          marginInlineStart: 0,
-          marginInlineEnd: token.marginXS,
-        },
-      },
-
-      [`${progressCls}-text-inner`]: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-        marginInlineStart: 0,
-        padding: `0 ${unit(token.paddingXXS)}`,
-        [`&${progressCls}-text-start`]: {
-          justifyContent: 'start',
-        },
-        [`&${progressCls}-text-end`]: {
-          justifyContent: 'end',
-        },
-      },
-
-      [`&${progressCls}-status-active`]: {
-        [`${progressCls}-bg::before`]: {
-          position: 'absolute',
-          inset: 0,
-          backgroundColor: token.colorBgContainer,
-          borderRadius: token.lineBorderRadius,
-          opacity: 0,
-          animationName: genAntProgressActive(),
-          animationDuration: token.progressActiveMotionDuration,
-          animationTimingFunction: token.motionEaseOutQuint,
-          animationIterationCount: 'infinite',
-          content: '""',
-        },
-      },
-
-      [`&${progressCls}-rtl${progressCls}-status-active`]: {
-        [`${progressCls}-bg::before`]: {
-          animationName: genAntProgressActive(true),
-        },
      },

      [`&${progressCls}-status-exception`]: {
-        [`${progressCls}-bg`]: {
-          backgroundColor: token.colorError,
-        },
-        [`${progressCls}-text`]: {
+        [`${progressCls}-indicator`]: {
          color: token.colorError,
        },
      },

-      [`&${progressCls}-status-exception ${progressCls}-inner:not(${progressCls}-circle-gradient)`]:
-        {
-          [`${progressCls}-circle-path`]: {
-            stroke: token.colorError,
-          },
-        },
-
      [`&${progressCls}-status-success`]: {
-        [`${progressCls}-bg`]: {
-          backgroundColor: token.colorSuccess,
-        },
-        [`${progressCls}-text`]: {
+        [`${progressCls}-indicator`]: {
          color: token.colorSuccess,
        },
      },
-
-      [`&${progressCls}-status-success ${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
-        [`${progressCls}-circle-path`]: {
-          stroke: token.colorSuccess,
-        },
-      },
    },
  };
 };

+// ====================================================================
+// ==                              Line                              ==
+// ====================================================================
+const genLineStyle: GenerateStyle<ProgressToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-line`]: {
+      position: 'relative',
+      width: '100%',
+      fontSize: token.fontSize,
+
+      [`${componentCls}-body`]: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        width: '100%',
+        gap: token.marginXS,
+      },
+
+      [`${componentCls}-rail`]: {
+        flex: 'auto',
+        background: token.remainingColor,
+        borderRadius: token.lineBorderRadius,
+        position: 'relative',
+        width: '100%',
+      },
+
+      [`&${componentCls}-status-active`]: {
+        [`${componentCls}-track:after`]: {
+          content: '""',
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: token.colorBgContainer,
+          borderRadius: 'inherit',
+          opacity: 0,
+          animationName: genAntProgressActive(),
+          animationDuration: token.progressActiveMotionDuration,
+          animationTimingFunction: token.motionEaseOutQuint,
+          animationIterationCount: 'infinite',
+        },
+      },
+
+      [`${componentCls}-track`]: {
+        position: 'absolute',
+        insetInlineStart: 0,
+        insetBlock: 0,
+        borderRadius: 'inherit',
+        background: token.defaultColor,
+        transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
+        minWidth: 'max-content',
+        display: 'flex',
+        alignItems: 'center',
+
+        '&-success': {
+          background: token.colorSuccess,
+        },
+      },
+
+      [`&${componentCls}-status-exception`]: {
+        [`${componentCls}-track`]: {
+          background: token.colorError,
+        },
+      },
+
+      [`&${componentCls}-status-success`]: {
+        [`${componentCls}-track`]: {
+          background: token.colorSuccess,
+        },
+      },
+
+      // >>>>> indicator
+      // >>> Outer
+      [`${componentCls}-indicator-outer`]: {
+        [`&${componentCls}-indicator-start`]: {
+          order: -1,
+        },
+      },
+
+      [`${componentCls}-body-layout-bottom`]: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: token.marginXXS,
+      },
+
+      // >>> Inner
+      [`${componentCls}-indicator${componentCls}-indicator-inner`]: {
+        color: token.colorWhite,
+        paddingInline: token.paddingXXS,
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+
+        [`&${componentCls}-indicator-end`]: {
+          justifyContent: 'end',
+        },
+
+        [`&${componentCls}-indicator-start`]: {
+          justifyContent: 'start',
+        },
+
+        [`&${componentCls}-indicator-bright`]: {
+          color: 'rgba(0, 0, 0, 0.45)',
+        },
+      },
+    },
+  };
+};
+
+// ====================================================================
+// ==                             Circle                             ==
+// ====================================================================
 const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
  const { componentCls: progressCls, iconCls: iconPrefixCls } = token;

  return {
-    [progressCls]: {
-      [`${progressCls}-circle-trail`]: {
+    [`${progressCls}-circle`]: {
+      [`${progressCls}-circle-rail`]: {
        stroke: token.remainingColor,
      },

-      [`&${progressCls}-circle ${progressCls}-inner`]: {
+      [`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
+        [`${progressCls}-circle-path`]: {
+          stroke: token.defaultColor,
+        },
+      },
+
+      [`${progressCls}-body`]: {
        position: 'relative',
        lineHeight: 1,
        backgroundColor: 'transparent',
      },

-      [`&${progressCls}-circle ${progressCls}-text`]: {
+      [`${progressCls}-indicator`]: {
        position: 'absolute',
        insetBlockStart: '50%',
        insetInlineStart: 0,
@@ -303,15 +273,19 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
        },
      },

-      [`${progressCls}-circle&-status-exception`]: {
-        [`${progressCls}-text`]: {
-          color: token.colorError,
+      [`&${progressCls}-status-exception`]: {
+        [`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
+          [`${progressCls}-circle-path`]: {
+            stroke: token.colorError,
+          },
        },
      },

-      [`${progressCls}-circle&-status-success`]: {
-        [`${progressCls}-text`]: {
-          color: token.colorSuccess,
+      [`&${progressCls}-status-success`]: {
+        [`${progressCls}-body:not(${progressCls}-circle-gradient)`]: {
+          [`${progressCls}-circle-path`]: {
+            stroke: token.colorSuccess,
+          },
        },
      },
    },
@@ -324,6 +298,9 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
  };
 };

+// ====================================================================
+// ==                              Step                              ==
+// ====================================================================
 const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
  const { componentCls: progressCls } = token;

@@ -331,15 +308,19 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
    [progressCls]: {
      [`${progressCls}-steps`]: {
        display: 'inline-block',
-        '&-outer': {
+        '&-body': {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
+          gap: token.progressStepMarginInlineEnd,
+
+          [`${progressCls}-indicator`]: {
+            marginInlineStart: token.marginXS,
+          },
        },
        '&-item': {
          flexShrink: 0,
          minWidth: token.progressStepMinWidth,
-          marginInlineEnd: token.progressStepMarginInlineEnd,
          backgroundColor: token.remainingColor,
          transition: `all ${token.motionDurationSlow}`,

@@ -352,12 +333,15 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
  };
 };

+// ====================================================================
+// ==                           Small Line                           ==
+// ====================================================================
 const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSObject => {
  const { componentCls: progressCls, iconCls: iconPrefixCls } = token;

  return {
    [progressCls]: {
-      [`${progressCls}-small&-line, ${progressCls}-small&-line ${progressCls}-text ${iconPrefixCls}`]:
+      [`${progressCls}-small&-line, ${progressCls}-small&-line ${progressCls}-indicator ${iconPrefixCls}`]:
        {
          fontSize: token.fontSizeSM,
        },
@@ -365,6 +349,9 @@ const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
  };
 };

+// ====================================================================
+// ==                             Export                             ==
+// ====================================================================
 export const prepareComponentToken: GetDefaultToken<'Progress'> = (token) => ({
  circleTextColor: token.colorText,
  defaultColor: token.colorInfo,
@@ -387,6 +374,7 @@ export default genStyleHooks(

    return [
      genBaseStyle(progressToken),
+      genLineStyle(progressToken),
      genCircleStyle(progressToken),
      genStepStyle(progressToken),
      genSmallLine(progressToken),
--- a/components/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/steps/tests/snapshots/demo-extend.test.ts.snap
@@ -2634,7 +2634,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 40px; height: 40px; font-size: 12px;"
              >
                <svg
@@ -2643,7 +2643,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -2673,7 +2673,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -2814,7 +2814,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 32px; height: 32px; font-size: 10.8px;"
              >
                <svg
@@ -2823,7 +2823,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -2853,7 +2853,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3462,7 +3462,7 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
            role="progressbar"
          >
            <div
-              class="ant-progress-inner"
+              class="ant-progress-body"
              style="width: 40px; height: 40px; font-size: 12px;"
            >
              <svg
@@ -3471,7 +3471,7 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
                viewBox="0 0 100 100"
              >
                <circle
-                  class="ant-progress-circle-trail"
+                  class="ant-progress-circle-rail"
                  cx="50"
                  cy="50"
                  r="48"
@@ -3501,7 +3501,7 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
                />
              </svg>
              <span
-                class="ant-progress-text"
+                class="ant-progress-indicator"
              />
            </div>
          </div>
@@ -3714,7 +3714,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 40px; height: 40px; font-size: 12px;"
              >
                <svg
@@ -3723,7 +3723,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3753,7 +3753,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3899,7 +3899,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 32px; height: 32px; font-size: 10.8px;"
              >
                <svg
@@ -3908,7 +3908,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3938,7 +3938,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -4084,7 +4084,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 40px; height: 40px; font-size: 12px;"
              >
                <svg
@@ -4093,7 +4093,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -4123,7 +4123,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -4269,7 +4269,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width: 32px; height: 32px; font-size: 10.8px;"
              >
                <svg
@@ -4278,7 +4278,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -4308,7 +4308,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
--- a/components/steps/tests/snapshots/demo.test.ts.snap
+++ b/components/steps/tests/snapshots/demo.test.ts.snap
@@ -2278,7 +2278,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:40px;height:40px;font-size:12px"
              >
                <svg
@@ -2287,7 +2287,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -2317,7 +2317,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -2458,7 +2458,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:32px;height:32px;font-size:10.8px"
              >
                <svg
@@ -2467,7 +2467,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -2497,7 +2497,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3102,7 +3102,7 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
            role="progressbar"
          >
            <div
-              class="ant-progress-inner"
+              class="ant-progress-body"
              style="width:40px;height:40px;font-size:12px"
            >
              <svg
@@ -3111,7 +3111,7 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
                viewBox="0 0 100 100"
              >
                <circle
-                  class="ant-progress-circle-trail"
+                  class="ant-progress-circle-rail"
                  cx="50"
                  cy="50"
                  r="48"
@@ -3141,7 +3141,7 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
                />
              </svg>
              <span
-                class="ant-progress-text"
+                class="ant-progress-indicator"
              />
            </div>
          </div>
@@ -3352,7 +3352,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:40px;height:40px;font-size:12px"
              >
                <svg
@@ -3361,7 +3361,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3391,7 +3391,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3537,7 +3537,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:32px;height:32px;font-size:10.8px"
              >
                <svg
@@ -3546,7 +3546,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3576,7 +3576,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3722,7 +3722,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:40px;height:40px;font-size:12px"
              >
                <svg
@@ -3731,7 +3731,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3761,7 +3761,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
@@ -3907,7 +3907,7 @@ Array [
              role="progressbar"
            >
              <div
-                class="ant-progress-inner"
+                class="ant-progress-body"
                style="width:32px;height:32px;font-size:10.8px"
              >
                <svg
@@ -3916,7 +3916,7 @@ Array [
                  viewBox="0 0 100 100"
                >
                  <circle
-                    class="ant-progress-circle-trail"
+                    class="ant-progress-circle-rail"
                    cx="50"
                    cy="50"
                    r="48"
@@ -3946,7 +3946,7 @@ Array [
                  />
                </svg>
                <span
-                  class="ant-progress-text"
+                  class="ant-progress-indicator"
                />
              </div>
            </div>
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@@ -67,7 +67,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          top: '50%',
          transform: 'translate(-50%, -50%)',

-          '&-inner': {
+          '&-body': {
            width: `${unit(progressSize)} !important`,
            height: `${unit(progressSize)} !important`,
          },
@@ -80,7 +80,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
          top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal(),
        },

-        [`${componentCls}-item-icon ${antCls}-progress-inner`]: {
+        [`${componentCls}-item-icon ${antCls}-progress-body`]: {
          width: `${unit(progressSizeSM)} !important`,
          height: `${unit(progressSizeSM)} !important`,
        },
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
    "@rc-component/mutate-observer": "^2.0.0",
    "@rc-component/pagination": "~1.1.1",
    "@rc-component/picker": "~1.2.2",
+    "@rc-component/progress": "~1.0.1",
    "@rc-component/qrcode": "~1.0.0",
    "@rc-component/resize-observer": "^1.0.0",
    "@rc-component/segmented": "~1.1.0",
@@ -147,7 +148,6 @@
    "dayjs": "^1.11.11",
    "rc-checkbox": "~3.5.0",
    "rc-notification": "~5.6.3",
-    "rc-progress": "~4.0.0",
    "rc-rate": "~2.13.1",
    "rc-slider": "~11.1.8",
    "rc-steps": "~6.0.1",