feat(circle,line): enable indeterminate mode

README.md

@@ -121,8 +121,8 @@ export default () => (
     <tr>
       <td>percent</td>
       <td>Number | Number[]</td>
-      <td>0</td>
-      <td>the percent of the progress</td>
+      <td>null</td>
+      <td>the percent of the progress, if it is not defined the indeterminate mode will be enabled</td>
     </tr>
     <tr>
       <td>gapDegree</td>

docs/demo/indeterminate.md

@@ -0,0 +1,3 @@
+## indeterminate
+
+<code src="../examples/indeterminate.tsx">

docs/examples/indeterminate.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Line, Circle } from 'rc-progress';
+
+const Indeterminate = () => {
+  return (
+    <div style={{ margin: 10, width: 200 }}>
+      <Circle />
+      <Line />
+    </div>
+  );
+};
+
+export default Indeterminate;

src/Circle.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { defaultProps, useTransitionDuration } from './common';
+import { defaultProps, useTransitionDuration, toArray } from './common';
 import type { ProgressProps } from './interface';
 import useId from './hooks/useId';
+import getIndeterminateCircle from './utils/getIndeterminateCircle';
 
 function stripPercentToNumber(percent: string) {
   return +percent.replace('%', '');
 }
 
-function toArray<T>(value: T | T[]): T[] {
-  const mergedValue = value ?? [];
-  return Array.isArray(mergedValue) ? mergedValue : [mergedValue];
-}
-
 const VIEW_BOX_SIZE = 100;
 
 const getCircleStyle = (
@@ -86,6 +82,11 @@ const Circle: React.FC<ProgressProps> = ({
   const perimeterWithoutGap = perimeter * ((360 - gapDegree) / 360);
   const { count: stepCount, space: stepSpace } =
     typeof steps === 'object' ? steps : { count: steps, space: 2 };
+  const {
+    indeterminateStylePops,
+    indeterminateStyleTag,
+    percent: _percent,
+  } = getIndeterminateCircle({ percent });
 
   const circleStyle = getCircleStyle(
     perimeter,
@@ -99,7 +100,7 @@ const Circle: React.FC<ProgressProps> = ({
     strokeLinecap,
     strokeWidth,
   );
-  const percentList = toArray(percent);
+  const percentList = toArray(_percent);
   const strokeColorList = toArray(strokeColor);
   const gradient = strokeColorList.find((color) => color && typeof color === 'object');
 
@@ -135,7 +136,7 @@ const Circle: React.FC<ProgressProps> = ({
             strokeLinecap={strokeLinecap}
             strokeWidth={strokeWidth}
             opacity={ptg === 0 ? 0 : 1}
-            style={circleStyleForStack}
+            style={{ ...circleStyleForStack, ...indeterminateStylePops }}
             ref={(elem) => {
               // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
               // React will call the ref callback with the DOM element when the component mounts,
@@ -229,6 +230,7 @@ const Circle: React.FC<ProgressProps> = ({
         />
       )}
       {stepCount ? getStepStokeList() : getStokeList()}
+      {indeterminateStyleTag}
     </svg>
   );
 };

src/Line.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useTransitionDuration, defaultProps } from './common';
+import { useTransitionDuration, defaultProps, toArray } from './common';
 import type { ProgressProps } from './interface';
+import getIndeterminateLine from './utils/getIndeterminateLine';
 
 const Line: React.FC<ProgressProps> = ({
   className,
@@ -18,7 +19,12 @@ const Line: React.FC<ProgressProps> = ({
 }) => {
   // eslint-disable-next-line no-param-reassign
   delete restProps.gapPosition;
-  const percentList = Array.isArray(percent) ? percent : [percent];
+  const {
+    indeterminateStylePops,
+    indeterminateStyleTag,
+    percent: _percent,
+  } = getIndeterminateLine({ percent, strokeLinecap, strokeWidth });
+  const percentList = toArray(_percent);
   const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
 
   const paths = useTransitionDuration();
@@ -64,6 +70,7 @@ const Line: React.FC<ProgressProps> = ({
           transition:
             transition ||
             'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
+          ...indeterminateStylePops,
         };
         const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
         stackPtg += ptg;
@@ -88,6 +95,7 @@ const Line: React.FC<ProgressProps> = ({
           />
         );
       })}
+      {indeterminateStyleTag}
     </svg>
   );
 };

src/common.ts

@@ -3,7 +3,7 @@ import type { ProgressProps } from './interface';
 
 export const defaultProps: Partial<ProgressProps> = {
   className: '',
-  percent: 0,
+  percent: null,
   prefixCls: 'rc-progress',
   strokeColor: '#2db7f5',
   strokeLinecap: 'round',
@@ -43,3 +43,8 @@ export const useTransitionDuration = (): SVGPathElement[] => {
 
   return pathsRef.current;
 };
+
+export const toArray = <T>(value: T | T[]): T[] => {
+  const mergedValue = value ?? [];
+  return Array.isArray(mergedValue) ? mergedValue : [mergedValue];
+};

src/utils/getIndeterminateCircle.tsx

@@ -0,0 +1,32 @@
+interface IndeterminateOption {
+  percent: number | number[];
+}
+
+export default (options: IndeterminateOption) => {
+  if (options.percent !== null) {
+    return {
+      ...options,
+      indeterminateStylePops: {},
+      indeterminateStyleTag: null,
+    };
+  }
+
+  const animationName = 'circle-indeterminate-animate';
+  const percent = 40;
+
+  return {
+    percent,
+    indeterminateStylePops: {
+      transform: 'rotate(0deg)',
+      animation: `${animationName} 1s linear infinite`,
+    },
+    indeterminateStyleTag: (
+      <style>
+        {`@keyframes ${animationName} {
+            0 % { transform: rotate(0deg);}
+            100% {transform: rotate(360deg);}
+          }`}
+      </style>
+    ),
+  };
+};

src/utils/getIndeterminateLine.tsx

@@ -0,0 +1,36 @@
+interface IndeterminateOption {
+  percent: number | number[];
+  strokeLinecap: string;
+  strokeWidth: number;
+}
+
+export default (options: IndeterminateOption) => {
+  if (options.percent !== null) {
+    return {
+      percent: options.percent,
+      indeterminateStylePops: {},
+      indeterminateStyleTag: null,
+    };
+  }
+  const animationName = 'line-indeterminate-animate';
+  const percent = 40;
+  const strokeDashOffset =
+    100 - (percent + (options.strokeLinecap === 'round' ? options.strokeWidth : 0));
+
+  return {
+    percent,
+    indeterminateStylePops: {
+      strokeDasharray: `${percent} 100`,
+      animation: `${animationName} .6s linear alternate infinite`,
+      strokeDashoffset: 0,
+    },
+    indeterminateStyleTag: (
+      <style>
+        {`@keyframes ${animationName} {
+            0% { stroke-dashoffset: 0; }
+            100% { stroke-dashoffset: -${strokeDashOffset};
+          }`}
+      </style>
+    ),
+  };
+};

tests/index.spec.js

@@ -243,4 +243,26 @@ describe('Progress', () => {
     expect(circle.find(Circle).props().percent).toEqual([20, 20, 20, 20]);
     circle.unmount();
   });
+
+  it('should support indeterminate mode', () => {
+    const Indeterminate = () => {
+      return (
+        <>
+          <Circle />
+          <Line />
+        </>
+      );
+    };
+
+    const wrapper = mount(<Indeterminate />);
+    expect(wrapper.find(Circle).find('style')).toBeDefined();
+    expect(
+      wrapper.find(Circle).find('.rc-progress-circle-path').at(0).getDOMNode().style.animation,
+    ).toContain('circle-indeterminate-animate');
+    expect(wrapper.find(Line).find('style')).toBeDefined();
+    expect(
+      wrapper.find(Line).find('.rc-progress-line-path').at(0).getDOMNode().style.animation,
+    ).toContain('line-indeterminate-animate');
+    wrapper.unmount();
+  });
 });