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: | String |
|
slots
Name | Description | Scope |
---|---|---|
- | Default placeholder and content, with custom | - |
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
Sample code
<template>
<div style="min-height: 300px;">
<Loading type="page">Loading</Loading>
</div>
</template>
Loading at the top of a page
Sample image
Sample code
<template>
<Loading type="refresh">Last saved 2016-06-23 11:47</Loading>
</template>
Loading at the bottom of a page
Sample image
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
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>