Loading

2021-07-06 11:36

You can use the loading component to display the loading animation.

Sample code

.json

copy

{
  "defaultTitle": "Loading",
  "usingComponents": {
    "loading": "mini-ali-ui/es/loading/index",
    "container": "mini-ali-ui/es/container/index"
  }
}

.axml

copy

Loading<loading size="80rpx" className="inlineBlock" />
<container hasTitle='{{true}}' title='loading size="6rpx"'>
  <loading size="6rpx" color="red" />
</container>
<container hasTitle='{{true}}' title='loading height="36rpx"'>
  <loading height="36rpx" color="red" />
</container>
<container hasTitle='{{true}}' title='loading height="36rpx" size="6rpx"'>
  <loading height="36rpx" size="6rpx" color="red" />
</container>
<container hasTitle='{{true}}' title='loading size="100px"'>
  <loading size="100px" color="red" />
</container>
<container hasTitle='{{true}}' title='loading'>
  <loading color="blue" />
</container>

.acss

copy

.inlineBlock {
  display: inline-block;
  vertical-align: middle;
}

Parameters

Property	Type	Description
className	String	Customized class.
size	String	Size of the loading animation. The default value is `100px`.
color	String	Size of the loading animation. The default value is `#1677ff`.

Notes:

The value of size requires the unit.
The value of color only supports color keywords and hexadecimal color values, such as red and #F00.