[Huawei Developers] muraliameakula:
If you want to use a loading inside your HOS you will not find a specific control for it so in this article I will show you how you can add a loading component and customize the color and the style.

At first we will use the Animation feature from HOS.

You need to choose the loading template that you want to use and I suggest this web site to you it contains to many styles and you can customize the color from it loading.io

After you select the template

You will be able to customize the UI from the Config Widget

Just remember to turn the transparent option as on

Then you will be able to download the loading as animated PNGs click at PNG then select PNG Sequence

Copy All the images to your Project as this

In the Project window, choose entry > src > main > resources > base > media, and add a set of pictures to the media directory.

Then inside you XML file you need to Add any component that you want to add the animation for it I will choose the Image.

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:alignment="center"

ohos:orientation="vertical">

<Image

ohos:id="$+id:loader"

ohos:height="100px"

ohos:width="100px"

ohos:layout_alignment="horizontal_center"

ohos:text_size="40vp"

/>

</DirectionalLayout>

After this at the java class we need to setuo the animation like this

Image Loader;

FrameAnimationElement frameAnimationElement;

@Override

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

Loader = (Image) findComponentById(ResourceTable.Id_loader);

frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_loader);

Loader.setBackground(frameAnimationElement);

ShowLoader();

}

public void ShowLoader(){

Loader.setVisibility(Component.VISIBLE);

frameAnimationElement.start();

}

public void HideLoader(){

frameAnimationElement.stop();

Loader.setVisibility(Component.INVISIBLE);

}
}

1. Create an animation_element.xml file under the graphic directory and declare image resources in the animation-list section. duration specifies how long the animation will last, in the unit of milliseconds. oneshot specifies whether the animation is played only once.

<animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:oneshot="false"> <item ohos:element="$media:frame1" ohos:duration="50"/> <item ohos:element="$media:frame2" ohos:duration="50"/> <item ohos:element="$media:frame3" ohos:duration="50"/> <item ohos:element="$media:frame4" ohos:duration="50"/> <item ohos:element="$media:frame5" ohos:duration="50"/> <item ohos:element="$media:frame6" ohos:duration="50"/> <item ohos:element="$media:frame7" ohos:duration="50"/> <item ohos:element="$media:frame8" ohos:duration="50"/> <item ohos:element="$media:frame9" ohos:duration="50"/> <item ohos:element="$media:frame10" ohos:duration="50"/> <item ohos:element="$media:frame11" ohos:duration="50"/> <item ohos:element="$media:frame12" ohos:duration="50"/> <item ohos:element="$media:frame13" ohos:duration="50"/> <item ohos:element="$media:frame14" ohos:duration="50"/> <item ohos:element="$media:frame15" ohos:duration="50"/> <item ohos:element="$media:frame16" ohos:duration="50"/> <item ohos:element="$media:frame17" ohos:duration="50"/> <item ohos:element="$media:frame18" ohos:duration="50"/> <item ohos:element="$media:frame19" ohos:duration="50"/> <item ohos:element="$media:frame21" ohos:duration="50"/> <item ohos:element="$media:frame22" ohos:duration="50"/> <item ohos:element="$media:frame23" ohos:duration="50"/> <item ohos:element="$media:frame24" ohos:duration="50"/> <item ohos:element="$media:frame25" ohos:duration="50"/> <item ohos:element="$media:frame26" ohos:duration="50"/> <item ohos:element="$media:frame27" ohos:duration="50"/> <item ohos:element="$media:frame28" ohos:duration="50"/> <item ohos:element="$media:frame29" ohos:duration="50"/> <item ohos:element="$media:frame30" ohos:duration="50"/> </animation-list>

Now you will have the following result

​

Conclusion

You can animate any control as you want in you use the Animation list so can use it for the click button or any control action.

Sample Code: https://github.com/omernaser/Loader-Harmony-OS

Reference

https://loading.io/

https://developer.harmonyos.com/en/docs/documentation/doc-guides/ui-java-animation-0000000000580278

Original Source