Power Apps Loading Spinner

In this PowerApps Tutorial, We will see what is Loading Spinner in PowerApps and how a PowerApps user can work with the Power Apps loading spinner in the app.

Also, We will cover with these below topics that are related to PowerApps Loading Spinner as:

• PowerApps loading spinner function
• PowerApps loading spinner on button click
• PowerApps loading spinner data or control
• PowerApps loading spinner gif
• PowerApps loading spinner gif download
• PowerApps screen loading spinner property
• loading spinner PowerApps

PowerApps loading spinner function

• A Loading Spinner in PowerApps is an animated element that helps to indicate loading is in process. When the loading data is slow, that case, the loading spinner will appear. This means, it hleps to let the user know that the process is in busy mode and it may be take some time to appear something. Also, it is known as the SpinnerLoaderProgress indicator.
• Similarly, In the PowerApps, if the loading data is slow in the app and you want to put a spinner to optimize the delay time, then this is known as PowerApps Loading Spinner.
• Microsoft provided a property named “LoadingSpinner” in the Advanced tab or as well as the Dropdown in the top left of the app.
• If you will set the loading spinner property to data, it will appear with a loading spinner whenever a user will open up the screen.

Read: Power Apps Choices Function with Examples

PowerApps loading spinner on button click

Do you want to work with PowerApps Loading Spinner on the Button click? Refer to this below step-wise simple scenario.

In this example what I want to do is, there will be a navigation button on the first screen. When a user will click on this button, then a loading spinner will appear for some time and it will navigate to the second screen.

Step – 1:

• On the PowerApps, I have two screens named Home Screen and Main Screen. The Home screen looks like the below screenshot:

• In this above screen, I want to put a loading spinner. To add the loading spinner in the app, Download and save it somewhere in your system. The downloaded image should be in GIF.
• In the Home screen, Insert an Image control (Insert -> Media -> Image). Place the image control in the middle of the page.
• Set its Image property to the specific spinner gif picture (where you have downloaded the GIF file).
• Select the Image control and set its Visible property as:

Visible = VarSpinLoad

Where,

VarSpinLoad = Specify a variable name

Step – 2:

• On the Home screen, Insert a Timer control. In some cases, we can not see the loading spinner due to the loading time is too short. To resolve this, we are using a Timer control to increase the loading time and it will appear in the image when the timer runs.
• Add a Next Icon to navigate the next screen (Main screen).
• Apply this below formula on Next icon’s OnSelect property as:

OnSelect = Set(
    vartime,
    true
);
Set(
    VarSpinLoad,
    true
)

Where,

vartime, VarSpinLoad = Variable names

Step – 3:

• Select the Timer control and set its Start property as:

Start = vartime

• Set the Timer’s Duration property to this below formula:

Duration = 4000

Here I passed the duration as 4second, which means When 4s passes, it will navigate to the main screen automatically and the loading spinner image will be invisible.

Step – 4:

• Select the Timer control and apply this below formula on its OnTimeEnd property as:

OnTimerEnd = Navigate(
    MainScreen,
    ScreenTransition.None
);
Set(
    VarTab,
    "Sub"
);
Set(
    VarSpinLoad,
    false
)

Where,

1. MainScreen = This is the second screen that will navigate when the user will click on the Next button
2. VarTab, VarSpinLoad = Variable Name

• Set the Timer’s Visible property to:

Visible = false

Step – 5:

• Now Save and Publish the app.
• Click on the Next button (on the Home screen). Once you will click, it will load for 4 seconds. That means, the spinner will display for 4 seconds and after 4 seconds, it will navigate to the next screen (Main screen) as shown in the below screenshot.

Read Power Apps Dropdown Control

PowerApps screen loading spinner property

• There are two Loading Spinner properties that are provided by the PowerApps called LoadingSpinner and LoadingSpinnerColor.
• The LoadingSpinner property is used to showing the app out of box loader image unless the screen finishes loading.
• This property has three values:
  • LoadingSpinner.Controls = If you will set the Loading spinner value to Controls, then it will show the Loading Spinner unless all the controls present on the screen get loaded completely.
  • LoadingSpinner.Data = If you will set the Loading spinner value to Data, it will show the Loading Spinner unless all the data gets retrieved on the screen from the defined data source.
  • LoadingSpinner.None = If you will set the Loading spinner value to None, then it will not show the loading image on the screen. By default, the loading spinner will be set to None.

• The LoadingSpinnerColor property is used to set the color of the loading image.

PowerApps loading spinner data or control

Now comes to this topic as what does the mean of PowerApps Loading Spinner Data or Control.

• In most cases what happens is, When you will click any control to display the spinner, then that animation image will not appear on the screen. The reason this behind is, you have the loading spinner in your app but due to the loading time is too short, ta PowerApps user can not notice the variable changing value.
• Because the code is loading too fast, that’s why a user can not see the spinner on the current code.
• As we discussed above, PowerApps has a built-in property called LoadingSpinner on the PowerApps Screen properties.
• This property has three different values named Data, Controls, and None. You can set this property to either Data or Controls (I would prefer to set Data only). If you will set the value as None, then nothing will happen.
• Also, it has another property named LoadingSpinner where you can set the color.

Different ways to create PowerApps Loading Spinner

• There are two ways by using you can create the loading spinner in the PowerApps. Such as:
  1. Automated Way
  2. Manually Setting Spinner

Automated Way	Manually Setting Spinner
On the PowerApps screen, there will be an Advanced tab property called Loading Spinner. By default, the loading spinner property will be set to LoadingSpinner.None before you changing its value to Data or Controls.	In this manually technique, a PowerApps user can import an image for loading spinner by searching from the internet or from the free site like loading.io.
To make the PowerApps environment sluggish, you can set this loading spinner property to Data i.e. LoadingSpinner.Data.	Search the Website as Loading.io and download the icon as per your choice. Some icons are free from there and some of them are paid.
When you will change the loading spinner to Data, then the screen will be opened, the data will come in and the loading spinner will easily understand what is going on.	Before downloading any icons from the site, you can see the preview and it will allow to choose a color scheme. PowerApps user can customize spinner and can download the speed and size of it.
Also, there is a Loading Spinner color property in the screen’s dropdown list that helps to set the color of loading spinner.	To show and hide the images on different screens, this method will help you. Because this method has full control overload spinner.

PowerApps loading spinner gif or PowerApps loading spinner gif download

• PowerApps does not provide any spinner images in the app. We have to supply the image on our own.
• To work with the PowerApps Loading Spinner, first of all, you need to add a spinner GIF. If you will search in google for the “spinner gif”, then you will get a lot of sites where you can configure the spinner that you want to use for your application.
• Download and save the spinner that you want to add to the app (the image must be a GIF). Now you can copy and paste it into the PowerApps app and that will create an image element in the app.
• There is another free online site i.e. Loading.io where you can find different types of spinners. Here you can select the Palette to choose the spinner color as per your need.

Also you may like these below PowerApps Tutorials:

• Power Apps Len Function
• Show hide fields based on dropdown selection PowerApps (2 Examples)
• How to Create Tabbed Forms in PowerApps for SharePoint List
• PowerApps repeating table
• PowerApps CountRows function with Examples
• PowerApps CountIf Function with Examples
• PowerApps Count Function with Examples
• PowerApps CheckBox – How to use
• PowerApps LastSubmit() with Examples
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps Patch Function with examples
• PowerApps AddColumns Function with Examples

In this PowerApps Tutorial, We saw what is Loading Spinner in PowerApps and how a PowerApps user can work with the spinner in the app.

Also, We covered with these below topics that are related to PowerApps Loading Spinner as:

• PowerApps loading spinner function
• PowerApps loading spinner on button click
• PowerApps loading spinner data or control
• PowerApps loading spinner gif
• PowerApps loading spinner gif download
• PowerApps screen loading spinner property
• Loading spinner PowerApps