feat: steps support for circular progress bar (#47940)

* feat: steps support for circular progress bar * Update components/progress/index.zh-CN.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/__tests__/index.test.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/demo/circle-steps.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update circle-steps.tsx * Update components/progress/progress.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update components/progress/index.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update package.json * Update components/progress/demo/circle-steps.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
2024-11-27 20:49:53 +08:00 · 2024-03-24 18:30:53 +08:00 · 2024-03-24 18:30:53 +08:00 · 311a718956
commit 311a718956
parent 80f49bfcf2
11 changed files with 536 additions and 8 deletions
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@ -29,6 +29,7 @@ const Circle: React.FC<CircleProps> = (props) => {
    children,
    success,
    size = originWidth,
+    steps,
  } = props;

  const [width, height] = getSize(size, 'circle');
@ -51,6 +52,7 @@ const Circle: React.FC<CircleProps> = (props) => {
    return undefined;
  }, [gapDegree, type]);

+  const percentArray = getPercentage(props);
  const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || undefined;

  // using className to style stroke color
@ -63,10 +65,11 @@ const Circle: React.FC<CircleProps> = (props) => {

  const circleContent = (
    <RCCircle
-      percent={getPercentage(props)}
+      steps={steps}
+      percent={steps ? percentArray[1] : percentArray}
      strokeWidth={strokeWidth}
      trailWidth={strokeWidth}
-      strokeColor={strokeColor}
+      strokeColor={steps ? strokeColor[1] : strokeColor}
      strokeLinecap={strokeLinecap}
      trailColor={trailColor}
      prefixCls={prefixCls}
--- a/components/progress/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/progress/tests/snapshots/demo-extend.test.ts.snap
@ -485,6 +485,204 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct

 exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/progress/demo/circle-steps.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  style="flex-wrap: wrap;"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      aria-valuenow="50"
+      class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
+      role="progressbar"
+    >
+      <div
+        class="ant-progress-inner"
+        style="width: 120px; height: 120px; font-size: 24px;"
+      >
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="0 0 100 100"
+        >
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(163.125deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(198.74999999999997deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(234.37499999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(269.99999999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(305.625deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(341.24999999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 198.96753472735355px 251.32741228718345; stroke-dashoffset: 176.09659288643437; transform: rotate(376.87499999999994deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+        </svg>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      aria-valuenow="100"
+      class="ant-progress ant-progress-status-success ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
+      role="progressbar"
+    >
+      <div
+        class="ant-progress-inner"
+        style="width: 120px; height: 120px; font-size: 24px;"
+      >
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="0 0 100 100"
+        >
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(-18deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(54deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(126deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 213.06192982974676; transform: rotate(198deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+          />
+        </svg>
+        <span
+          class="ant-progress-text"
+        >
+          <span
+            aria-label="check"
+            class="anticon anticon-check"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="check"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/progress/demo/circle-steps.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/progress/demo/component-token.tsx extend context correctly 1`] = `
 Array [
  <div
--- a/components/progress/tests/snapshots/demo.test.ts.snap
+++ b/components/progress/tests/snapshots/demo.test.ts.snap
@ -455,6 +455,202 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
 </div>
 `;

+exports[`renders components/progress/demo/circle-steps.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+  style="flex-wrap:wrap"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      aria-valuenow="50"
+      class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
+      role="progressbar"
+    >
+      <div
+        class="ant-progress-inner"
+        style="width:120px;height:120px;font-size:24px"
+      >
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="0 0 100 100"
+        >
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(127.5deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(163.125deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(198.74999999999997deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(234.37499999999994deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke:rgba(0, 0, 0, 0.06);stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(269.99999999999994deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke:rgba(0, 0, 0, 0.06);stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(305.625deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke:rgba(0, 0, 0, 0.06);stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(341.24999999999994deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke:rgba(0, 0, 0, 0.06);stroke-dasharray:198.96753472735355px 251.32741228718345;stroke-dashoffset:176.09659288643437;transform:rotate(376.87499999999994deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+        </svg>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      aria-valuenow="100"
+      class="ant-progress ant-progress-status-success ant-progress-circle ant-progress-steps ant-progress-show-info ant-progress-default"
+      role="progressbar"
+    >
+      <div
+        class="ant-progress-inner"
+        style="width:120px;height:120px;font-size:24px"
+      >
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="0 0 100 100"
+        >
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:213.06192982974676;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:213.06192982974676;transform:rotate(-18deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:213.06192982974676;transform:rotate(54deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:213.06192982974676;transform:rotate(126deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="50"
+            cy="50"
+            opacity="1"
+            r="40"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:213.06192982974676;transform:rotate(198deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+        </svg>
+        <span
+          class="ant-progress-text"
+        >
+          <span
+            aria-label="check"
+            class="anticon anticon-check"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="check"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/progress/demo/component-token.tsx correctly 1`] = `
 Array [
  <div
--- a/components/progress/tests/snapshots/index.test.tsx.snap
+++ b/components/progress/tests/snapshots/index.test.tsx.snap
@ -1,5 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`Progress circle progress should accept steps 1`] = `
+<div
+  aria-valuenow="70"
+  class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
+  role="progressbar"
+>
+  <div
+    class="ant-progress-steps-outer"
+  >
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item"
+      style="width: 14px; height: 8px;"
+    />
+    <span
+      class="ant-progress-text"
+      title="70%"
+    >
+      70%
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Progress circle progress steps can be number 1`] = `
+<div
+  aria-valuenow="70"
+  class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
+  role="progressbar"
+>
+  <div
+    class="ant-progress-steps-outer"
+  >
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item ant-progress-steps-item-active"
+      style="width: 14px; height: 8px;"
+    />
+    <div
+      class="ant-progress-steps-item"
+      style="width: 14px; height: 8px;"
+    />
+    <span
+      class="ant-progress-text"
+      title="70%"
+    >
+      70%
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Progress render dashboard 295 gapDegree 1`] = `
 <div
  aria-valuenow="0"
--- a/components/progress/tests/index.test.tsx
+++ b/components/progress/tests/index.test.tsx
@ -404,4 +404,14 @@ describe('Progress', () => {
    expect(progress).toHaveAttribute('aria-labelledby', 'progressLabel');
    expect(progress).toHaveAttribute('aria-valuenow', '90');
  });
+
+  it('circle progress should accept steps', () => {
+    const { container } = render(<Progress percent={70} steps={{ count: 5, gap: 5 }} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('circle progress steps can be number', () => {
+    const { container } = render(<Progress percent={70} steps={5} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
--- a/components/progress/demo/circle-steps.md
+++ b/components/progress/demo/circle-steps.md
@ -0,0 +1,7 @@
+## zh-CN
+
+步骤进度圈，支持颜色分段展示。
+
+## en-US
+
+A circular progress bar that support steps.
--- a/components/progress/demo/circle-steps.tsx
+++ b/components/progress/demo/circle-steps.tsx
@ -0,0 +1,23 @@
+import { Progress, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <Space wrap>
+    <Progress
+      type="dashboard"
+      steps={8}
+      percent={50}
+      trailColor="rgba(0, 0, 0, 0.06)"
+      strokeWidth={20}
+    />
+    <Progress
+      type="circle"
+      percent={100}
+      steps={{ count: 5, gap: 12 }}
+      trailColor="rgba(0, 0, 0, 0.06)"
+      strokeWidth={20}
+    />
+  </Space>
+);
+
+export default App;
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -31,6 +31,7 @@ If it will take a long time to complete an operation, you can use `Progress` to
 <code src="./demo/linecap.tsx">Stroke Linecap</code>
 <code src="./demo/gradient-line.tsx">Custom line gradient</code>
 <code src="./demo/steps.tsx">Progress bar with steps</code>
+<code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar whit steps</code>
 <code src="./demo/size.tsx">Progress size</code>

 ## API
@ -63,13 +64,15 @@ Properties that shared by all types.

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| steps | The total step count.When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them.When passing number, the default value for `gap` is 2. | number \| { count: number, gap: number } | - | 5.16.0 |
 | strokeColor | The color of circular progress, render gradient when passing an object | string \| { number%: string } | - | - |
 | strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |

 ### `type="dashboard"`

-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| steps | The total step count.When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them.When passing number, the default value for `gap` is 2. | number \| { count: number, gap: number } | - | 5.16.0 |
 | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
 | 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 |
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -32,6 +32,7 @@ demo:
 <code src="./demo/linecap.tsx">边缘形状</code>
 <code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
 <code src="./demo/steps.tsx">步骤进度条</code>
+<code src="./demo/circle-steps.tsx" version="5.16.0">步骤进度圈</code>
 <code src="./demo/size.tsx">尺寸</code>

 ## API
@ -64,6 +65,7 @@ demo:

 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
 | strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
 | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |

@ -71,6 +73,7 @@ demo:

 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
 | gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -53,7 +53,7 @@ export interface ProgressProps extends ProgressAriaProps {
  gapDegree?: number;
  gapPosition?: 'top' | 'bottom' | 'left' | 'right';
  size?: number | [number | string, number] | ProgressSize;
-  steps?: number;
+  steps?: number | { count: number; gap: number };
  /** @deprecated Use `success` instead */
  successPercent?: number;
  children?: React.ReactNode;
@ -148,7 +148,12 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  // Render progress shape
  if (type === 'line') {
    progress = steps ? (
-      <Steps {...props} strokeColor={strokeColorNotGradient} prefixCls={prefixCls} steps={steps}>
+      <Steps
+        {...props}
+        strokeColor={strokeColorNotGradient}
+        prefixCls={prefixCls}
+        steps={typeof steps === 'object' ? steps.count : steps}
+      >
        {progressInfo}
      </Steps>
    ) : (
@ -177,9 +182,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  const classString = classNames(
    prefixCls,
    `${prefixCls}-status-${progressStatus}`,
-    `${prefixCls}-${(type === 'dashboard' && 'circle') || (steps && 'steps') || type}`,
    {
+      [`${prefixCls}-${(type === 'dashboard' && 'circle') || type}`]: type !== 'line',
      [`${prefixCls}-inline-circle`]: type === 'circle' && getSize(size, 'circle')[0] <= 20,
+      [`${prefixCls}-line`]: !steps && type === 'line',
+      [`${prefixCls}-steps`]: steps,
      [`${prefixCls}-show-info`]: showInfo,
      [`${prefixCls}-${size}`]: typeof size === 'string',
      [`${prefixCls}-rtl`]: direction === 'rtl',
--- a/package.json
+++ b/package.json
@ -145,7 +145,7 @@
    "rc-notification": "~5.4.0",
    "rc-pagination": "~4.0.4",
    "rc-picker": "~4.3.0",
-    "rc-progress": "~3.5.1",
+    "rc-progress": "~4.0.0",
    "rc-rate": "~2.12.0",
    "rc-resize-observer": "^1.4.0",
    "rc-segmented": "~2.3.0",