diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.module.scss b/src/pages/Desktop/Window/WindowBox/Content/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f48db137f88369321bed12145c9d00fd1239cc0d
--- /dev/null
+++ b/src/pages/Desktop/Window/WindowBox/Content/index.module.scss
@@ -0,0 +1,12 @@
+.content {
+  width: 100%;
+  height: calc( 100% - #{$window-header-height} );
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.tsx b/src/pages/Desktop/Window/WindowBox/Content/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b30cd47ddf341e96c813a932347c71c46d70121
--- /dev/null
+++ b/src/pages/Desktop/Window/WindowBox/Content/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { Spin } from 'antd'
+import { Loading3QuartersOutlined } from '@ant-design/icons'
+
+interface Props {
+  loading: boolean
+  children: React.ReactNode
+}
+
+const Content: React.FC<Props> = ({ loading, children }) => {
+  return (
+    <div className={styles.content}>
+      {loading ? (
+        <div className={styles.loading}>
+          <Spin size="large" spinning={loading} />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
+
+export default Content
diff --git a/src/pages/Desktop/Window/WindowBox/Header/index.tsx b/src/pages/Desktop/Window/WindowBox/Header/index.tsx
index 75cb53f6b5334efae902cb4b530fb8aadb0e1c8d..26b900ec8a36bba19f8afe3d805198d16511c303 100644
--- a/src/pages/Desktop/Window/WindowBox/Header/index.tsx
+++ b/src/pages/Desktop/Window/WindowBox/Header/index.tsx
@@ -3,7 +3,8 @@ import {
   MinusOutlined,
   CloseOutlined,
   BorderOutlined,
-  BlockOutlined
+  BlockOutlined,
+  ReloadOutlined
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -15,6 +16,7 @@ import vars from '@/common/style/vars.scss'
 
 interface Props {
   windowRef: RefObject<HTMLDivElement>
+  setLoading: { (value: boolean): void }
 }
 
 interface Drag {
@@ -22,7 +24,7 @@ interface Drag {
   startY: number
 }
 
-const Header: React.FC<Props> = ({ windowRef }) => {
+const Header: React.FC<Props> = ({ windowRef, setLoading }) => {
   const { window: windowObj, id: windowId } = React.useContext(WindowContext)
   const editWindowStatus = useStore((state: MyState) => state.setWindowStatus)
   const closeWindow = useStore((state: MyState) => state.closeWindow)
@@ -95,6 +97,16 @@ const Header: React.FC<Props> = ({ windowRef }) => {
         {windowObj.title}
       </div>
       <div className={styles.tools}>
+        <div
+          className={styles.tool}
+          onClick={() => {
+            setLoading(true)
+            window.setTimeout(() => {
+              setLoading(false)
+            }, 200)
+          }}>
+          <ReloadOutlined />
+        </div>
         <div
           className={styles.tool}
           onClick={() => editWindowStatus(WINDOW_STATUS.MIN, windowId)}>
diff --git a/src/pages/Desktop/Window/WindowBox/index.module.scss b/src/pages/Desktop/Window/WindowBox/index.module.scss
index 7983fa1cf1b1c5e52fe796300170402bf0d7b183..bc65823ac9596c79077021ee6019218f95889b49 100644
--- a/src/pages/Desktop/Window/WindowBox/index.module.scss
+++ b/src/pages/Desktop/Window/WindowBox/index.module.scss
@@ -14,11 +14,6 @@ $shift: -6px;
   height: 100%;
 }
 
-.content {
-  width: 100%;
-  height: calc(100% - #{$window-header-height});
-}
-
 .dragRight {
   position: absolute;
   top: 32px;
diff --git a/src/pages/Desktop/Window/WindowBox/index.tsx b/src/pages/Desktop/Window/WindowBox/index.tsx
index 776355d3a799707f30bb7c391a0291ffdfa03342..6b7ed75fe5fb9703ff42279bc928a4c169f6f54e 100644
--- a/src/pages/Desktop/Window/WindowBox/index.tsx
+++ b/src/pages/Desktop/Window/WindowBox/index.tsx
@@ -6,6 +6,7 @@ import { WINDOW_STATUS, WINDOW_DRAG, WINDOW_MIN } from '@/common/constants'
 import vars from '@/common/style/vars.scss'
 import useMethods from '@utils/useMethods'
 import useStore, { MyState } from '@/store'
+import Content from '@/pages/Desktop/Window/WindowBox/Content'
 
 interface Props {
   children: React.ReactNode
@@ -21,6 +22,7 @@ const WindowBox: React.FC<Props> = props => {
   const { window: windowObj } = React.useContext(WindowContext)
   const editWindow = useStore((state: MyState) => state.editWindow)
   const windowRef = React.useRef<HTMLDivElement>(null)
+  const [loading, setLoading] = React.useState<boolean>(false)
   const [drag, setDrag] = React.useState<Drag>({
     startX: 0,
     startY: 0,
@@ -131,8 +133,9 @@ const WindowBox: React.FC<Props> = props => {
   return (
     <div className={styles.windowBox} ref={windowRef} style={windowStyle}>
       <div className={styles.main} style={{ zIndex: windowStyle.zIndex + 1 }}>
-        <Header windowRef={windowRef} />
-        <div className={styles.content}>{props.children}</div>
+        <Header setLoading={setLoading} windowRef={windowRef} />
+        {/* eslint-disable-next-line react/no-children-prop */}
+        <Content loading={loading} children={props.children} />
         {windowObj.status === WINDOW_STATUS.NORMAL && (
           <>
             <div
diff --git a/src/pages/Desktop/Window/index.tsx b/src/pages/Desktop/Window/index.tsx
index ca982399e3c3f966496d680492d25c1527251390..f06fa56655fcd09c4179ca55db5a5b250086adfe 100644
--- a/src/pages/Desktop/Window/index.tsx
+++ b/src/pages/Desktop/Window/index.tsx
@@ -13,7 +13,7 @@ const Window: React.FC = () => {
   const { window } = React.useContext(WindowContext)
   return (
     <WindowBox>
-      <div></div>
+      <div>asd</div>
     </WindowBox>
   )
 }