Loading

17:06

Description

A lightweight loading animation with circle (spinning ring) and flower modes; size, active color and inactive color are configurable. It is commonly used for the loading states of ux-loadmore, ux-switch and similar components. show=false unmounts the node and stops the animation.

Compatibility

Platform	Support
App	✅ Supported (flower mode degrades to a solid light-colored dot; the root is a block-level flex box and does not sit inline with text)
H5	✅ Supported
WeChat Mini Program	✅ Supported (rotation is driven by CSS @keyframes instead of UniElement.animate)

Examples

Basic Usage

Circle mode by default, rotating automatically.

View source

<template>
    <view class="demo">
        <ux-loading />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

Mode (mode)

mode="circle" is the circle mode; mode="flower" is the flower mode.

View source

<template>
    <view class="demo">
        <ux-loading :mode="mode" />
    </view>
    <view class="btns">
        <ux-button size="small" :type="mode === 'circle' ? 'primary' : 'default'" @click="mode = 'circle'">circle</ux-button>
        <ux-button size="small" :type="mode === 'flower' ? 'primary' : 'default'" @click="mode = 'flower'">flower</ux-button>
    </view>
</template>

<script setup lang="uts">
const mode = ref<'circle' | 'flower'>('circle');
</script>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
.btns {
    display: flex;
    flex-direction: row;
}
</style>

Color (color)

color only works for circle mode, setting the color of the active area.

View source

<template>
    <view class="demo">
        <ux-loading mode="circle" color="#2979ff" />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

Size (size)

Set the size of the loading icon in px via size.

View source

<template>
    <view class="demo">
        <ux-loading :size="20" />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

Show/Hide (show)

When show=false the loading animation is hidden.

View source

<template>
    <view class="demo">
        <ux-loading v-if="show" />
        <text v-else>加载已完成</text>
    </view>
    <ux-button size="small" :type="show ? 'primary' : 'default'" @click="show = !show">切换显示</ux-button>
</template>

<script setup lang="uts">
const show = ref<boolean>(true);
</script>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
mode	Animation type: circle – spinning ring, flower – flower	LoadingMode	'circle'	-
color	Color of the active area; only effective when mode = circle	string	''	-
inactiveColor	Color of the inactive sides (the three static sides) of the ring; defaults to the theme divider color, only effective when mode = circle	string	''	-
size	Size of the loading icon, in px	string | number	'17'	-
show	Whether to show the animation	boolean	true	-

Events

ux-loading has no events.

Slots

ux-loading has no slots.

Notes

1. color and inactive-color only apply to circle mode; in flower mode the colors come from the built-in SVG in the stylesheet, so passing a color has no effect.
2. On App, flower mode does not support the SVG background image and degrades to a solid dot in the theme's light color (H5 / WeChat Mini Program render the flower as expected).
3. Rotation is implemented per platform: App / H5 use UniElement.animate, while WeChat Mini Program does not support that API and uses CSS @keyframes instead — the visuals match but the implementation differs.
4. The root display differs too: on App it is display:flex (a block-level 17px box), while H5 / Mini Program use inline-flex + vertical-align:middle so it can sit inline with text; on App you need to center it with your own flex container.
5. size sets both width and height; a numeric value is treated as px (the component runs it through addUnit).
6. With show=false the component unmounts its node via v-if and cancels the animation; showing it again remounts and restarts the animation.