All Products
Search
Document Center

Loading

Last Updated: Mar 04, 2022

This topic describes different methods of using the Loading component and the API descriptions:

  • Use this component in the Kylin project.

  • Use this component in other projects. Import it through ESModule.

  • API description provides API information for props and slots.

Kylin

<dependency component="{ Loading, LoadingIndicator }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Loading, LoadingIndicator } from '@alipay/antui-vue';

API description

Loading

Packaged loading, including full page loading and footer loading.

props

Property

Description

Type

Default value

type

The loading type. Valid values: "", "page", "refresh", and "nomore".

String

""

slots

Name

Description

Scope

-

Default placeholder and content, with custom DOM supported.

-

LoadingIndicator

Independent three-square animation for loading.

props

Property

Description

Type

Default value

white

Whether to display white squares (blue squares are displayed by default).

Boolean

false

tiny

Whether to display the squares in minimum size.

Boolean

false

Demo

Loading animation only

Sample image

Sample code

<template>

  <div style="text-align: center; background: #999;">
    <LoadingIndicator />
    <br/>
    <LoadingIndicator white />
    <br/>
    <LoadingIndicator tiny />
    <br/>
    <LoadingIndicator tiny white />
  </div>

</template>

Loading at the center of a page

Sample image

Loading2

Sample code

<template>
  <div style="min-height: 300px;">
    <Loading type="page">Loading</Loading>
  </div>
</template>

Loading at the top of a page

Sample image

Last Saved

Sample code

<template>

  <Loading type="refresh">Last saved 2016-06-23 11:47</Loading>

</template>

Loading at the bottom of a page

Sample image

Loading

Sample code

<template>

  <div>
    <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">Content Display Area</div>
    <Loading >Loading...</Loading>
  </div>

</template>

No more

Sample image

no more

Sample code

<template>

  <div>
    <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">Content Display Area</div>
    <Loading type="nomore">There is no more</Loading>
  </div>

</template>