RUI.next

Feedback
ActivityIndicator

ActivityIndicator

ActivityIndicator indicates that a task is currently in progress.

<ActivityIndicator />
<ActivityIndicator color="blue" />
<ActivityIndicator sizeType="large" />
<ActivityIndicator text="Loading..." />
<ActivityIndicator toast />
<ActivityIndicator toast text="Loading..." />
<ActivityIndicator carousel="circle" />
<ActivityIndicator carousel="rect" />
<ActivityIndicator />
<ActivityIndicator color="blue" />
<ActivityIndicator sizeType="large" />
<ActivityIndicator text="Loading..." />
<ActivityIndicator toast />
<ActivityIndicator toast text="Loading..." />
<ActivityIndicator carousel="circle" />
<ActivityIndicator carousel="rect" />

Example

Basic usage of ActivityIndicator component.

Carousel Circle loading style
Carousel Rect loading style (auto adapt to the color/font-size of wrapper)
Without text
With text
Loading...
With large size and customized text alignment
Loading content
Toast mode of activity-indicator
Click to show Toast

API

PropertiesDescriptionTypeDefault
animatingWhether to show the indicator (true by default) or hide it (false).booleantrue
sizeTypeThe size type of the indicator, optional value: small, largestringsmall
toastWhether to use toast stylebooleanfalse
carouselThe carousel style, optional value: circle, rectstring-
sizeThe size for carousel-circle stylenumber30
textThe loading text behind the indicatorstring-