diff --git a/src/components/Page/index.d.ts b/src/components/Page/index.d.ts
index 1e1aac7..fe0bd42 100644
--- a/src/components/Page/index.d.ts
+++ b/src/components/Page/index.d.ts
@@ -16,6 +16,8 @@ export interface PageProps {
   isShowFooter?: boolean;
   /** 是否显示头部和底部组件，默认 true */
   isShowAllAction?: boolean;
+  /** 是否处于加载状态，默认 false  */
+  loading?: boolean;
   /** 取消按钮文字，默认 "关闭" */
   backButtonText?: string;
   /** 内容区域的padding，默认 "20px" */
diff --git a/src/components/Page/index.js b/src/components/Page/index.js
index ca75dca..a023b4e 100644
--- a/src/components/Page/index.js
+++ b/src/components/Page/index.js
@@ -1,4 +1,4 @@
-import { Button, Space } from "antd";
+import { Button, Space, Spin } from "antd";
 import { useEffect, useState } from "react";
 import { throttle } from "throttle-debounce";
 import HeaderBack from "../HeaderBack";
@@ -14,6 +14,7 @@ function Page(props) {
     headerPrevious = true,
     isShowFooter = true,
     isShowAllAction = true,
+    loading = false,
     backButtonText = "关闭",
     contentPadding = "20px",
     customActionButtons,
@@ -47,29 +48,31 @@ function Page(props) {
   }, [isShowAllAction, isShowFooter]);
 
   return (
-    <div className="page-layout" id="page-layout">
-      {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
-      <div style={{ padding: contentPadding }}>
-        {children && typeof children === "function" ? children() : children}
-        {
-          (isShowAllAction && isShowFooter) && (
-            <div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}>
-              <div style={{ height: "52px" }}></div>
-              <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
-                {customActionButtons || (
-                  <Space>
-                    {extraActionButtons}
-                    <Button onClick={() => history?.goBack?.() || window.history.back()}>
-                      {backButtonText}
-                    </Button>
-                  </Space>
-                )}
+    <Spin spinning={loading}>
+      <div className="page-layout" id="page-layout">
+        {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
+        <div style={{ padding: contentPadding }}>
+          {children && typeof children === "function" ? children() : children}
+          {
+            (isShowAllAction && isShowFooter) && (
+              <div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}>
+                <div style={{ height: "52px" }}></div>
+                <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
+                  {customActionButtons || (
+                    <Space>
+                      {extraActionButtons}
+                      <Button onClick={() => history?.goBack?.() || window.history.back()}>
+                        {backButtonText}
+                      </Button>
+                    </Space>
+                  )}
+                </div>
               </div>
-            </div>
-          )
-        }
+            )
+          }
+        </div>
       </div>
-    </div>
+    </Spin>
   );
 }