ant-design/components/spin/demo/inside.md

---
order: 2
title:
  zh-CN: 容器
  en-US: Inside a container
---

## zh-CN

放入一个容器中。

## en-US

Spin in a container.

```tsx
import { Spin } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <div className="example">
    <Spin />
  </div>
);

export default App;
```

```css
.example {
  margin: 20px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
```

<style>
  .example {
    background: rgba(255,255,255,0.08);
  }
</style>
docs: update demo format 2016-03-31 09:40:55 +08:00			`---`
			`order: 2`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			`title:`
docs: translation of `Spin` and `Slider` (#2378) 2016-07-21 09:51:04 +08:00			`zh-CN: 容器`
			`en-US: Inside a container`
docs: update demo format 2016-03-31 09:40:55 +08:00			`---`
update spin component 2015-10-31 02:00:03 +08:00
docs: translation of `Spin` and `Slider` (#2378) 2016-07-21 09:51:04 +08:00			`## zh-CN`

update spin component 2015-10-31 02:00:03 +08:00			`放入一个容器中。`

docs: translation of `Spin` and `Slider` (#2378) 2016-07-21 09:51:04 +08:00			`## en-US`

			`Spin in a container.`

chore: Compatible for @types/react@18 (#34937) * chore: bump types def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: part ts def * chore: free --legacy-peer-deps * chore: ignore peer * chore: fix ts logic * chore: use fork docsearch * chore: fix demo ts 2022-04-08 22:55:42 +08:00			```tsx
update spin component 2015-10-31 02:00:03 +08:00			`import { Spin } from 'antd';`
chore: merge master 2022-05-23 14:37:16 +08:00			`import React from 'react';`
update spin component 2015-10-31 02:00:03 +08:00
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00			`const App: React.FC = () => (`
update spin component 2015-10-31 02:00:03 +08:00			`<div className="example">`
			`<Spin />`
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			`</div>`
:lipstick: fix eslint problems 2018-11-28 15:00:03 +08:00			`);`
docs: feat components TS demo (#34742) * docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type 2022-05-19 09:46:26 +08:00
			`export default App;`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			```
update spin component 2015-10-31 02:00:03 +08:00
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			```css
update spin component 2015-10-31 02:00:03 +08:00			`.example {`
chore : prettier code (#29123) * style: prettier code * update * Update index.less 2021-01-30 19:39:02 +08:00			`margin: 20px 0;`
			`margin-bottom: 20px;`
			`padding: 30px 50px;`
update spin component 2015-10-31 02:00:03 +08:00			`text-align: center;`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			`background: rgba(0, 0, 0, 0.05);`
update spin component 2015-10-31 02:00:03 +08:00			`border-radius: 4px;`
			`}`
:lipstick: prittier all files 2019-05-07 14:57:32 +08:00			```
fix: demo style 2019-12-24 20:58:42 +08:00
			`<style>`
			`.example {`
			`background: rgba(255,255,255,0.08);`
			`}`
			`</style>`