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.

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.

API #

Options #

Directives #