feat: Progress bar with customizable colors

assets/index.less

@@ -104,18 +104,19 @@
       inline-size: 100%;
       block-size: 2px;
       border: 0;
+      --progress-color: #31afff;
 
       &,
       &::-webkit-progress-bar {
         background-color: rgba(0, 0, 0, 0.04);
       }
 
       &::-moz-progress-bar {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
 
       &::-webkit-progress-value {
-        background-color: #31afff;
+        background: var(--progress-color);
       }
     }
   }

docs/examples/showProgress.tsx

@@ -28,6 +28,16 @@ export default () => {
       >
         Not Pause On Hover
       </button>
+      <button
+        onClick={() => {
+          notice.open({
+            content: `${new Date().toISOString()}`,
+            progressBarColor: 'yellow',
+          });
+        }}
+      >
+        Show Progress Bar with custom color
+      </button>
       {contextHolder}
     </>
   );

src/Notice.tsx

@@ -23,6 +23,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     duration = 4.5,
     showProgress,
     pauseOnHover = true,
+    progressBarColor,
 
     eventKey,
     content,
@@ -40,6 +41,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
   const [spentTime, setSpentTime] = React.useState(0);
   const mergedHovering = forcedHovering || hovering;
   const mergedShowProgress = duration > 0 && showProgress;
+  const mergedProgressBarColor = mergedShowProgress && progressBarColor;
+  const progressRef = React.useRef<HTMLProgressElement>(null);
 
   // ======================== Close =========================
   const onInternalClose = () => {
@@ -101,6 +104,12 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, spentTime, mergedHovering, mergedShowProgress, times]);
 
+  React.useEffect(() => {
+    if (mergedProgressBarColor) {
+      progressRef.current!.style.setProperty('--progress-color', mergedProgressBarColor);
+    }
+  }, [mergedProgressBarColor]);
+
   // ======================== Closable ========================
   const closableObj = React.useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {
@@ -161,7 +170,12 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
       {/* Progress Bar */}
       {mergedShowProgress && (
-        <progress className={`${noticePrefixCls}-progress`} max="100" value={validPercent}>
+        <progress
+          ref={progressRef}
+          className={`${noticePrefixCls}-progress`}
+          max="100"
+          value={validPercent}
+        >
           {validPercent + '%'}
         </progress>
       )}

src/hooks/useNotification.tsx

@@ -18,6 +18,7 @@ export interface NotificationConfig {
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   /** @private. Config for notification holder style. Safe to remove if refactor */
   className?: (placement: Placement) => string;

src/interface.ts

@@ -8,6 +8,7 @@ export interface NoticeConfig {
   content?: React.ReactNode;
   duration?: number | null;
   showProgress?: boolean;
+  progressBarColor?: string;
   pauseOnHover?: boolean;
   closeIcon?: React.ReactNode;
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);

tests/index.test.tsx

@@ -849,4 +849,44 @@ describe('Notification.Basic', () => {
       expect(document.querySelector('.rc-notification-notice-progress')).toBeFalsy();
     });
   });
+
+  describe('custom progress bar color', () => {
+    it('should display progress bar with custom color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor: 'red',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color': 'red',
+      });
+    });
+
+    it('should display progress bar with line-gradient color', () => {
+      const { instance } = renderDemo({
+        duration: 1,
+        showProgress: true,
+        progressBarColor:
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+
+      act(() => {
+        instance.open({
+          content: <p className="test">1</p>,
+        });
+      });
+
+      expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({
+        '--progress-color':
+          'linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%)',
+      });
+    });
+  });
 });