diff --git a/components/notification/demo/show-progress.md b/components/notification/demo/show-progress.md
new file mode 100644
index 000000000000..d8bbf11a1c0e
--- /dev/null
+++ b/components/notification/demo/show-progress.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+显示自动关闭通知框的进度条。
+
+## en-US
+
+Show progress bar for auto-closing notification.
diff --git a/components/notification/demo/show-progress.tsx b/components/notification/demo/show-progress.tsx
new file mode 100644
index 000000000000..afd5e3744491
--- /dev/null
+++ b/components/notification/demo/show-progress.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, notification } from 'antd';
+
+const App: React.FC = () => {
+ const [api, contextHolder] = notification.useNotification();
+
+ const openNotification = () => {
+ api.open({
+ message: 'Notification Title',
+ description:
+ 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+ showProgress: true,
+ });
+ };
+
+ return (
+ <>
+ {contextHolder}
+
+ >
+ );
+};
+
+export default App;
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
index 564dc7cd4eb0..441d47355d48 100644
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@@ -30,6 +30,7 @@ To display a notification message at any of the four corners of the viewport. Ty
Customized style
Update Message Content
Stack
+Show Progress
Static Method (deprecated)
_InternalPanelDoNotUseOrYouWillBeFired
@@ -53,6 +54,7 @@ The properties of config are as follows:
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
| description | The content of notification box (required) | ReactNode | - | - |
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - |
+| showProgress | Show progress bar for auto-closing notification. | boolean | | |
| icon | Customized icon | ReactNode | - | - |
| key | The unique identifier of the Notification | string | - | - |
| message | The title of notification box (required) | ReactNode | - | - |
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index c003d194dbb4..4e497dbd34f1 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -31,6 +31,7 @@ demo:
自定义样式
更新消息内容
堆叠
+显示进度条
静态方法(不推荐)
_InternalPanelDoNotUseOrYouWillBeFired
@@ -105,6 +106,7 @@ notification.config({
| bottom | 消息从底部弹出时,距离底部的位置,单位像素 | number | 24 | |
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0:设置为 null 或 false 时隐藏关闭按钮 |
| duration | 默认自动关闭延时,单位秒 | number | 4.5 | |
+| showProgress | 显示自动关闭通知框的进度条 | boolean | | |
| getContainer | 配置渲染节点的输出位置,但依旧为全屏展示 | () => HTMLNode | () => document.body | |
| placement | 弹出位置,可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
| rtl | 是否开启 RTL 模式 | boolean | false | |
diff --git a/components/notification/interface.ts b/components/notification/interface.ts
index 53ecbcbb5369..adc6ce23bf5d 100644
--- a/components/notification/interface.ts
+++ b/components/notification/interface.ts
@@ -25,6 +25,7 @@ export interface ArgsProps {
key?: React.Key;
onClose?: () => void;
duration?: number | null;
+ showProgress?: boolean;
icon?: React.ReactNode;
placement?: NotificationPlacement;
style?: React.CSSProperties;
@@ -52,6 +53,7 @@ export interface GlobalConfigProps {
top?: number;
bottom?: number;
duration?: number;
+ showProgress?: boolean;
prefixCls?: string;
getContainer?: () => HTMLElement | ShadowRoot;
placement?: NotificationPlacement;
@@ -72,4 +74,5 @@ export interface NotificationConfig {
rtl?: boolean;
stack?: boolean | { threshold?: number };
duration?: number;
+ showProgress?: boolean;
}