diff --git a/packages/loading/__tests__/loading.spec.ts b/packages/loading/__tests__/loading.spec.ts
index bee021f965..1bd25f4097 100644
--- a/packages/loading/__tests__/loading.spec.ts
+++ b/packages/loading/__tests__/loading.spec.ts
@@ -177,6 +177,23 @@ describe('Loading', () => {
expect(wrapper.find('.loading-custom-class').exists()).toBeTruthy()
})
+ test('customSvg directive', async () => {
+ const wrapper = mount({
+ directives: {
+ loading: vLoading,
+ },
+ template: ``,
+ data() {
+ return {
+ loading: true,
+ svg: ``,
+ }
+ },
+ })
+ await nextTick()
+ expect(wrapper.find('.custom-path').attributes().d).toEqual('M 30 15')
+ })
+
test('create service', async () => {
loadingInstance = Loading()
expect(document.querySelector('.el-loading-mask')).toBeTruthy()
diff --git a/packages/loading/src/createLoadingComponent.ts b/packages/loading/src/createLoadingComponent.ts
index c0dc1c8576..4e26fa743a 100644
--- a/packages/loading/src/createLoadingComponent.ts
+++ b/packages/loading/src/createLoadingComponent.ts
@@ -78,7 +78,8 @@ export function createLoadingComponent({
render() {
const spinner = h('svg', {
class: 'circular',
- viewBox: '25 25 50 50',
+ viewBox: this.svgViewBox ? this.svgViewBox : '25 25 50 50',
+ ...(this.svg ? { innerHTML: this.svg } : {}),
}, [
h('circle', { class: 'path', cx: '50', cy: '50', r: '20', fill: 'none' }),
])
diff --git a/packages/loading/src/directive.ts b/packages/loading/src/directive.ts
index a27b7829ee..5612b0aeb7 100644
--- a/packages/loading/src/directive.ts
+++ b/packages/loading/src/directive.ts
@@ -3,11 +3,15 @@ import Loading from './index'
const createInstance = (el, binding) => {
const textExr = el.getAttribute('element-loading-text')
const spinnerExr = el.getAttribute('element-loading-spinner')
+ const svgExr = el.getAttribute('element-loading-svg')
+ const svgViewBoxExr = el.getAttribute('element-loading-svg-view-box')
const backgroundExr = el.getAttribute('element-loading-background')
const customClassExr = el.getAttribute('element-loading-custom-class')
const vm = binding.instance
el.instance = Loading({
text: vm && vm[textExr] || textExr,
+ svg: vm && vm[svgExr] || svgExr,
+ svgViewBox: vm && vm[svgViewBoxExr] || svgViewBoxExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
diff --git a/packages/loading/src/index.ts b/packages/loading/src/index.ts
index e417fc478f..005092562b 100644
--- a/packages/loading/src/index.ts
+++ b/packages/loading/src/index.ts
@@ -9,6 +9,8 @@ import isServer from '@element-plus/utils/isServer'
const defaults: ILoadingOptions = {
parent: null,
background: '',
+ svg: null,
+ svgViewBox: null,
spinner: false,
text: null,
fullscreen: true,
diff --git a/packages/loading/src/loading.type.ts b/packages/loading/src/loading.type.ts
index c6f7166f1d..e7d46018db 100644
--- a/packages/loading/src/loading.type.ts
+++ b/packages/loading/src/loading.type.ts
@@ -3,6 +3,8 @@ import type { Ref, VNode } from 'vue'
export type ILoadingOptions = {
parent?: ILoadingParentElement
background?: string
+ svg?: string
+ svgViewBox?: string
spinner?: boolean | string
text?: string
fullscreen?: boolean
diff --git a/website/demo-styles/loading.scss b/website/demo-styles/loading.scss
index bc497631b3..6fd4ac13ba 100644
--- a/website/demo-styles/loading.scss
+++ b/website/demo-styles/loading.scss
@@ -1,3 +1,7 @@
.demo-loading .#{$namespace}-table {
border: none;
}
+
+.demo-loading .custom-loading-svg .el-loading-mask > .el-loading-spinner > .circular {
+ animation: none;
+}
diff --git a/website/docs/en-US/loading.md b/website/docs/en-US/loading.md
index 2147bf7054..fa07a4c050 100644
--- a/website/docs/en-US/loading.md
+++ b/website/docs/en-US/loading.md
@@ -101,7 +101,7 @@ export default defineComponent({
You can customize loading text, loading spinner and background color.
-:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
+:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner`, `element-loading-background`, and `element-loading-svg` attributes are used to set the icon class name, background color value, and loading icon, respectively.
```html
+
+
+
+
+
+
+
+