diff --git a/docs/en-US/component/loading.md b/docs/en-US/component/loading.md
index a8359d632a..299e4956d2 100644
--- a/docs/en-US/component/loading.md
+++ b/docs/en-US/component/loading.md
@@ -83,23 +83,29 @@ If Element Plus is imported entirely, a globally method `$loading` will be regis
 
 ### Options
 
-| Name        | Description                                                                                                                                                              | Type                       | Default       |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------------- |
-| target      | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | ^[string] / ^[HTMLElement] | document.body |
-| body        | same as the `body` modifier of `v-loading`                                                                                                                               | ^[boolean]                 | false         |
-| fullscreen  | same as the `fullscreen` modifier of `v-loading`                                                                                                                         | ^[boolean]                 | true          |
-| lock        | same as the `lock` modifier of `v-loading`                                                                                                                               | ^[boolean]                 | false         |
-| text        | loading text that displays under the spinner                                                                                                                             | ^[string]                  | —             |
-| spinner     | class name of the custom spinner                                                                                                                                         | ^[string]                  | —             |
-| background  | background color of the mask                                                                                                                                             | ^[string]                  | —             |
-| customClass | custom class name for Loading                                                                                                                                            | ^[string]                  | —             |
+| Name                 | Description                                                                                                                                                              | Type                       | Default       |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------------- |
+| target               | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | ^[string] / ^[HTMLElement] | document.body |
+| body                 | same as the `body` modifier of `v-loading`                                                                                                                               | ^[boolean]                 | false         |
+| fullscreen           | same as the `fullscreen` modifier of `v-loading`                                                                                                                         | ^[boolean]                 | true          |
+| lock                 | same as the `lock` modifier of `v-loading`                                                                                                                               | ^[boolean]                 | false         |
+| text                 | loading text that displays under the spinner                                                                                                                             | ^[string]                  | —             |
+| spinner              | class name of the custom spinner                                                                                                                                         | ^[string]                  | —             |
+| background           | background color of the mask                                                                                                                                             | ^[string]                  | —             |
+| customClass          | custom class name for loading                                                                                                                                            | ^[string]                  | —             |
+| svg                  | custom SVG element to override the default loading spinner                                                                                                               | ^[string]                  | —             |
+| svgViewBox           | sets the viewBox attribute for loading svg element                                                                                                                       | ^[string]                  | —             |
+| beforeClose ^(2.7.8) | Function executed before loading attempts to close. If this function returns false, the closing process will be aborted. Otherwise, the loading will close.              | ^[Function]`() => boolean` | —             |
+| closed ^(2.7.8)      | Function triggered after loading has completely closed                                                                                                                   | ^[Function]`() => void`    | —             |
 
 ### Directives
 
-| Name                       | Description                                                  | Type                    |
-| -------------------------- | ------------------------------------------------------------ | ----------------------- |
-| v-loading                  | show animation while loading data                            | ^[boolean] / ^[Options] |
-| element-loading-text       | loading text that displays under the spinner                 | ^[string]               |
-| element-loading-spinner    | icon of the custom spinner                                   | ^[string]               |
-| element-loading-svg        | icon of the custom spinner (same as element-loading-spinner) | ^[string]               |
-| element-loading-background | background color of the mask                                 | ^[string]               |
+| Name                         | Description                                                  | Type                           |
+| ---------------------------- | ------------------------------------------------------------ | ------------------------------ |
+| v-loading                    | show animation while loading data                            | ^[boolean] / ^[LoadingOptions] |
+| element-loading-text         | loading text that displays under the spinner                 | ^[string]                      |
+| element-loading-spinner      | icon of the custom spinner                                   | ^[string]                      |
+| element-loading-svg          | icon of the custom spinner (same as element-loading-spinner) | ^[string]                      |
+| element-loading-svg-view-box | sets the viewBox attribute for loading svg element           | ^[string]                      |
+| element-loading-background   | background color of the mask                                 | ^[string]                      |
+| element-loading-custom-class | custom class name for loading                                | ^[string]                      |
diff --git a/packages/components/loading/src/service.ts b/packages/components/loading/src/service.ts
index cb4080d125..b784891d98 100644
--- a/packages/components/loading/src/service.ts
+++ b/packages/components/loading/src/service.ts
@@ -89,6 +89,8 @@ const resolveOptions = (options: LoadingOptions): LoadingOptionsResolved => {
     lock: options.lock ?? false,
     customClass: options.customClass || '',
     visible: options.visible ?? true,
+    beforeClose: options.beforeClose,
+    closed: options.closed,
     target,
   }
 }