---

title: type: references group: Build-in Components order: 8.09 version: 2.1

<loading>

v0.6.1+

The <loading> Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the <refresh> Component.

Note： To be rendered properly, the <loading> Component must appear inside the special Component such as <scroller>、<list>、<hlist>、<vlist>、<waterfall>.

• Example:

<list>
  ...
  ...
  <loading>
    ...
  </loading>
</list>

• Complete example goes here

Child Components

• Any other components, like the <text> and <image> components, can be put inside the loading component.

• <loading-indicator>: This is a dedicated component which provides a default loading animation effect, can only be used inside the <refresh> or the <loading> components.

• Example:

<loading>
  <text>Loading</text>
  <loading-indicator></loading-indicator>
  ...
</loading>

• Complete example goes here

Attributes

• Support all common attributes, check out common attributes

Attribute	Type	Value	Default Value
display	String	show / hide	show

display

• show：The loading animation will be started if a <loading-indicator> is included in the loading component.

• hide：Collapse the loading view. It also hides the <loading-indicator> and stops the loading animation if there's a <loading-indicator> included in the loading component.

Note： The visibility of <loading> component can be controlled by display attribute with the value show and hide. A display="show" should always be paired with a display="hide" statement.

• Example:

<template>
  <list>
    ...
    ...
    <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
      ...
    </loading>
    ...
  </list>
</template>

<script>
  ...
  methods: {
    onloading (event) {
      this.loadinging = true
      setTimeout(() => {
        this.loadinging = false
      }, 2000)
    },
  }
</script>

• Complete example goes here

Styles

• Please check out the common styles

Events

loading

• Triggered when the scroller or list is pulled up.

• Complete example goes here

Example

• Complete example goes here