style: update progress

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,

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;