diff --git a/packages/components/loading/src/loading.ts b/packages/components/loading/src/loading.ts
index cfa4144e14..d65d6b2e0a 100644
--- a/packages/components/loading/src/loading.ts
+++ b/packages/components/loading/src/loading.ts
@@ -10,6 +10,7 @@ import {
   withCtx,
   withDirectives,
 } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { removeClass } from '@element-plus/utils'
 
 import type { LoadingOptionsResolved } from './types'
@@ -17,6 +18,7 @@ import type { LoadingOptionsResolved } from './types'
 export function createLoadingComponent(options: LoadingOptionsResolved) {
   let afterLeaveTimer: number
 
+  const ns = useNamespace('loading')
   const afterLeaveFlag = ref(false)
   const data = reactive({
     ...options,
@@ -36,12 +38,12 @@ export function createLoadingComponent(options: LoadingOptionsResolved) {
         target.getAttribute('loading-number')
       loadingNumber = Number.parseInt(loadingNumber as any) - 1
       if (!loadingNumber) {
-        removeClass(target, 'el-loading-parent--relative')
+        removeClass(target, ns.bm('parent', 'relative'))
         target.removeAttribute('loading-number')
       } else {
         target.setAttribute('loading-number', loadingNumber.toString())
       }
-      removeClass(target, 'el-loading-parent--hidden')
+      removeClass(target, ns.bm('parent', 'hidden'))
     }
     remvoeElLoadingChild()
     loadingInstance.unmount()
@@ -98,13 +100,13 @@ export function createLoadingComponent(options: LoadingOptionsResolved) {
         )
 
         const spinnerText = data.text
-          ? h('p', { class: 'el-loading-text' }, [data.text])
+          ? h('p', { class: ns.b('text') }, [data.text])
           : undefined
 
         return h(
           Transition,
           {
-            name: 'el-loading-fade',
+            name: ns.b('fade'),
             onAfterLeave: handleAfterLeave,
           },
           {
@@ -117,7 +119,7 @@ export function createLoadingComponent(options: LoadingOptionsResolved) {
                       backgroundColor: data.background || '',
                     },
                     class: [
-                      'el-loading-mask',
+                      ns.b('mask'),
                       data.customClass,
                       data.fullscreen ? 'is-fullscreen' : '',
                     ],
@@ -126,7 +128,7 @@ export function createLoadingComponent(options: LoadingOptionsResolved) {
                     h(
                       'div',
                       {
-                        class: 'el-loading-spinner',
+                        class: ns.b('spinner'),
                       },
                       [spinner, spinnerText]
                     ),
diff --git a/packages/components/loading/src/service.ts b/packages/components/loading/src/service.ts
index 14d62b0ec8..c07bc0fc31 100644
--- a/packages/components/loading/src/service.ts
+++ b/packages/components/loading/src/service.ts
@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 import { isString } from '@vue/shared'
 import { isClient } from '@vueuse/core'
 import { addClass, getStyle, removeClass } from '@element-plus/utils'
-import { useZIndex } from '@element-plus/hooks'
+import { useNamespace, useZIndex } from '@element-plus/hooks'
 import { createLoadingComponent } from './loading'
 import type { LoadingInstance } from './loading'
 import type { LoadingOptionsResolved } from '..'
@@ -134,17 +134,19 @@ const addClassList = (
   parent: HTMLElement,
   instance: LoadingInstance
 ) => {
+  const ns = useNamespace('loading')
+
   if (
     instance.originalPosition.value !== 'absolute' &&
     instance.originalPosition.value !== 'fixed'
   ) {
-    addClass(parent, 'el-loading-parent--relative')
+    addClass(parent, ns.bm('parent', 'relative'))
   } else {
-    removeClass(parent, 'el-loading-parent--relative')
+    removeClass(parent, ns.bm('parent', 'relative'))
   }
   if (options.fullscreen && options.lock) {
-    addClass(parent, 'el-loading-parent--hidden')
+    addClass(parent, ns.bm('parent', 'hidden'))
   } else {
-    removeClass(parent, 'el-loading-parent--hidden')
+    removeClass(parent, ns.bm('parent', 'hidden'))
   }
 }