diff --git a/components/image/demo/preview-group-top-progress.md b/components/image/demo/preview-group-top-progress.md
new file mode 100644
index 0000000000..d6537d1618
--- /dev/null
+++ b/components/image/demo/preview-group-top-progress.md
@@ -0,0 +1,37 @@
+---
+order: 100
+title:
+  zh-CN: 多图预览时顶部进度自定义
+  en-US: Top progress customization when previewing multiple images
+debug: true
+---
+
+## zh-CN
+
+多图预览时顶部展示进度, 支持自定义
+
+## en-US
+
+The progress is displayed at the top of the multi-image preview, and customization is supported
+
+```jsx
+import { Image } from 'antd';
+
+const App = () => (
+  <Image.PreviewGroup
+    preview={{ countRender: (current, total) => `当前 ${current} / 总计 ${total}` }}
+  >
+    <Image width={150} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
+    <Image
+      width={150}
+      src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+    />
+    <Image
+      width={150}
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    />
+  </Image.PreviewGroup>
+);
+
+export default App;
+```
diff --git a/components/image/style/index.less b/components/image/style/index.less
index 3afbc0de16..4a66e2e679 100644
--- a/components/image/style/index.less
+++ b/components/image/style/index.less
@@ -135,6 +135,12 @@
         }
       }
 
+      &-progress {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
       &-icon {
         font-size: @image-preview-operation-size;
       }