Loading

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

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.