Loading

Show animation while loading data.

Loading inside a container

Displays animation in a container (such as a table) while loading data.

Customization

You can customize loading text, loading spinner and background color.

WARNING

Although the element-loading-svg attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause XSS attack. Please make sure that the content of element-loading-svg is trustworthy. Never assign user-submitted content to the element-loading-svg attribute.

Full screen loading

Show a full screen animation while loading data.

Service

You can also invoke Loading with a service. Import Loading service:

import { ElLoading } from 'element-plus'

Invoke it:

ElLoading.service(options)

The parameter options is the configuration of Loading, and its details can be found in the following table. LoadingService returns a Loading instance, and you can close it by invoking its close method:

const loadingInstance = ElLoading.service(options)
nextTick(() => {
  // Loading should be closed asynchronously
  loadingInstance.close()
})

Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:

const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

Calling the close method on any one of them can close this full screen Loading.

If Element Plus is imported entirely, a globally method $loading will be registered to app.config.globalProperties. You can invoke it like this: this.$loading(options), and it also returns a Loading instance.

Options

AttributeDescriptionTypeAccepted ValuesDefault
targetthe 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 nodeobject/stringdocument.body
bodysame as the body modifier of v-loadingbooleanfalse
fullscreensame as the fullscreen modifier of v-loadingbooleantrue
locksame as the lock modifier of v-loadingbooleanfalse
textloading text that displays under the spinnerstring
spinnerclass name of the custom spinnerstring
backgroundbackground color of the maskstring
custom-classcustom class name for Loadingstring

Directives

NameDescriptionType
v-loadingshow animation while loading databoolean
element-loading-textloading text that displays under the spinnerstring
element-loading-spinnerclass name of the custom spinnerstring
element-loading-backgroundbackground color of the maskstring