ant-design/components/message/demo/loading.md

---
order: 3
title:
  zh-CN: 加载中
  en-US: Message with loading indicator
---

## zh-CN

进行全局 loading，异步自行移除。

## en-US

Display a global loading indicator, which is dismissed by itself asynchronously.

```jsx
import { message, Button } from 'antd';

const success = () => {
  const hide = message.loading('Action in progress..', 0);
  // Dismiss manually and asynchronously
  setTimeout(hide, 2500);
};

export default () => <Button onClick={success}>Display a loading indicator</Button>;
```
-												docs: update demo format

											
										
										
											2016-03-31 09:40:55 +08:00
+								---
 								order: 3
-												docs: translate message

											
										
										
											2016-07-04 10:44:55 +08:00
+								title:
 								  zh-CN: 加载中
-												Documentation - Message Component

											
										
										
											2019-04-19 22:35:06 +08:00
+								  en-US: Message with loading indicator
-												docs: update demo format

											
										
										
											2016-03-31 09:40:55 +08:00
+								---
-												Add loading message

											
										
										
											2015-09-07 12:27:09 +08:00
-												docs: translate message

											
										
										
											2016-07-04 10:44:55 +08:00
+								## zh-CN
-												Add loading message

											
										
										
											2015-09-07 12:27:09 +08:00
+								进行全局 loading，异步自行移除。
-												docs: translate message

											
										
										
											2016-07-04 10:44:55 +08:00
+								## en-US
 								Display a global loading indicator, which is dismissed by itself asynchronously.
-												:lipstick: prittier all files

											
										
										
											2019-05-07 14:57:32 +08:00
+								```jsx
-												ES6 syntax for demo code

fix antd.notification

											
										
										
											2015-10-28 20:55:49 +08:00
+								import { message, Button } from 'antd';
-												Add loading message

											
										
										
											2015-09-07 12:27:09 +08:00
-												fix prefer-const

											
										
										
											2016-07-21 18:05:15 +08:00
+								const success = () => {
-												fix eslint

											
										
										
											2016-07-21 21:19:37 +08:00
+								  const hide = message.loading('Action in progress..', 0);
-												docs: translate message

											
										
										
											2016-07-04 10:44:55 +08:00
+								  // Dismiss manually and asynchronously
-												Add loading message

											
										
										
											2015-09-07 12:27:09 +08:00
+								  setTimeout(hide, 2500);
 								};
-												docs: demo support react18 (#34843)

* docs: update demo

* chore: add script

* test: fix demo test

* docs: convert demos

* chore: move script

* test: remove react-dom import

* chore: update deps

* docs: update riddle js

* test: fix image test

* docs: fix riddle demo
											
										
										
											2022-04-03 23:27:45 +08:00
+								export default () => <Button onClick={success}>Display a loading indicator</Button>;
-												:lipstick: prittier all files

											
										
										
											2019-05-07 14:57:32 +08:00
+								```