From c9188ec2764523cb86a4e3678822c3dad9f7ef1a Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 5 Mar 2022 16:43:06 +0800
Subject: [PATCH] style: update progress

---
 components/progress/Circle.tsx       | 13 +++++++++++--
 components/progress/style/index.less |  5 +++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
index 4a055b338..dee4bb0d1 100644
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@@ -13,6 +13,14 @@ function getPercentage({ percent, success, successPercent }: CircleProps) {
   return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
 }
 
+function getStrokeColor({
+  success = {},
+  strokeColor,
+}: Partial<CircleProps>): (string | Record<string, string>)[] {
+  const { strokeColor: successColor } = success;
+  return [successColor || presetPrimaryColors.green, strokeColor || null!];
+}
+
 export default defineComponent({
   inheritAttrs: false,
   props: progressProps(),
@@ -43,12 +51,13 @@ export default defineComponent({
     );
 
     // using className to style stroke color
-    const strokeColor = computed(() => [presetPrimaryColors.green, props.strokeColor || null]);
     const percent = computed(() => getPercentage(props));
     const isGradient = computed(
       () => Object.prototype.toString.call(props.strokeColor) === '[object Object]',
     );
-
+    const strokeColor = computed(() =>
+      getStrokeColor({ success: props.success, strokeColor: props.strokeColor }),
+    );
     const wrapperClassName = computed(() => ({
       [`${props.prefixCls}-inner`]: true,
       [`${props.prefixCls}-circle-gradient`]: isGradient.value,
diff --git a/components/progress/style/index.less b/components/progress/style/index.less
index dfde2fcbb..9ba991437 100644
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@@ -16,11 +16,13 @@
 
   &-steps {
     display: inline-block;
+
     &-outer {
       display: flex;
       flex-direction: row;
       align-items: center;
     }
+
     &-item {
       flex-shrink: 0;
       min-width: 2px;
@@ -180,6 +182,7 @@
       color: @error-color;
     }
   }
+
   &-circle&-status-success {
     .@{progress-prefix-cls}-text {
       color: @success-color;
@@ -192,10 +195,12 @@
     transform: translateX(-100%) scaleX(0);
     opacity: 0.1;
   }
+
   20% {
     transform: translateX(-100%) scaleX(0);
     opacity: 0.5;
   }
+
   100% {
     transform: translateX(0) scaleX(1);
     opacity: 0;