All Products
Search
Document Center

Loading

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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

 
  1. <template>
  2. <div style="text-align: center; background: #999;">
  3. <LoadingIndicator />
  4. <br/>
  5. <LoadingIndicator white />
  6. <br/>
  7. <LoadingIndicator tiny />
  8. <br/>
  9. <LoadingIndicator tiny white />
  10. </div>
  11. </template>

Loading at the center of a page

Sample image

Sample code

 
  1. <template>
  2. <div style="min-height: 300px;">
  3. <Loading type="page">加载中</Loading>
  4. </div>
  5. </template>

Loading at the top of a page

Sample image

Sample code

 
  1. <template>
  2. <Loading type="refresh">上次更新 2016-06-23 11:47</Loading>
  3. </template>

Loading at the bottom of a page

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
  4. <Loading >加载中...</Loading>
  5. </div>
  6. </template>

No more

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
  4. <Loading type="nomore">没有更多了</Loading>
  5. </div>
  6. </template>