Power Apps Loading Spinner – How to Use

Recently, I worked on the Power Apps loading spinner control, which provides feedback to users during data retrieval, processing, or any other time-consuming tasks within your app.

In this Power Apps tutorial, I will explain the PowerApps Loading Spinner and how to use a loading spinner in PowerApps with examples. Also, we will cover:

  • Power Apps loading spinner property
  • Power Apps spinner gif
  • Power Apps gallery loading spinner
  • Power Apps loading spinner data vs controls

Power Apps Loading Spinner

Power Apps loading spinner, also known as a loading indicator or spinner animation, is a visual element often used in Power Apps applications to indicate to users that the application is processing a request or loading content.

These spinners can help improve user experience by providing visual feedback that the app is working on their request and the frustration associated with waiting times.

Similarly, in the Power Apps, if the app’s loading data is slow and you want to add a spinner to optimize the delay time, this is known as the Power Apps Loading Spinner.

If you set the loading spinner property to data, it will appear with a loading spinner whenever a user opens the screen.

powerapps loading spinner

Power Apps Loading Spinner Property

Next, I will show the Power Apps loading spinner properties. Have a look at the below table.

PropertyDescription
AccesssibilityLabelScreen readers will audibly present this string upon user selection of the control
AppearanceWe can choose a spinner style, either “Primary” or “Inverted”
HeightIt specifies the control’s height from top to bottom
LabelThis property is used to specify the text beside the spinner
LabelPositionIt is related to the position of the spinner [Above, After, Below, Before]
SpinnerSizeWe can specify the size of the spinner [Tiny, Small, Medium, Huge, etc.]
WidthIt specifies the control’s width from the left side to the right side

Different Ways to Create Power Apps 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
See also  Power Apps Play Video from SharePoint

1. Automated Way:

On the Power Apps screen, there will be an Advanced tab property called Loading Spinner. By default, it is set to LoadingSpinner.None before you change its value to Data or Controls.

spinner powerapps

When you change the loading spinner to Data, the screen will open, the data will come in, and the loading spinner will easily understand what is going on.

loading screen powerapps

Also, the screen’s dropdown list has a LoadingSpinnerColor property that helps to set the color of the loading spinner.

powerapps loading

2. Manually Setting Spinner:

In this manual technique, a Power Apps user can import an image for the loading spinner by searching the Internet or from a free site like loading.io.

power apps canvas app loading spinner

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.

Before downloading any icons from the site, you can see the preview, which allows you to choose a color scheme. Power Apps users can customize the spinner and download its speed and size.

gallery loading spinner powerapps

To show and hide the images on different screens, this method will help you because this method has a full control overload spinner.

There are two ways to add a loading spinner control in Power Apps.

loading spinner gif

Power Apps Loading Spinner GIF

To create a Power Apps loading spinner gif, follow the below steps.

1. In Power Apps, I have an Edit form control named “Hotel Reservation Form,” an Image control that contains a loading spinner gif, and a Button control.

2. Whenever the user provides the new record in the form and selects the button control, the loading spinner will appear until the submission of a new record is completed, and it will navigate to the success screen.

See also  How to Add Hyperlink in Power Apps Gallery?

Output:

power apps loading spinner

3. To do so, open the Power Apps app and go to the Media section. Expand the + Add media dropdown and select the Upload option to select the spinner gif file from your local device.

loadingspinner powerapps

4. Once you add the specific loading spinner file into the Power Apps, it will appear under the Media section.

loading spinner in powerapps

5. Now, select the specific screen where you want to add the loading spinner. Insert a Rectangle control and make it Fill property as “White” color.

Fill = RGBA(227, 234, 243, 1)                      //You can also chage color code
power app loading spinner

6. Then, select the uploaded loading spinner to add on the screen [You can change the position where you need].

Image = Spinner
powerapps loading spinner property

7. Also, group [Select two controls > Ellipses (…) > Group] the Rectangle and Image control that contains the loading spinner, as shown below.

powerapps spinner gif

8. Now, select the Button control to create the variable and set its OnSelect property to the code below.

OnSelect = Set(
    varPouUp,
    true
);
SubmitForm('frm_SP Records');
ResetForm('frm_SP Records');
Navigate(
    'Success Screen',
    ScreenTransition.None
);
Set(
    varPouUp,
    false
)

Where,

  • varPouUp = Power Apps variable name
  • ‘frm_SP Records’ = Edit form control name
  • ‘Success Screen’ = Second screen name
loading spinner power apps

9. Finally, select the group [Group_Spinner] and set its Visible property as:

Visible = varPouUp
powerapps loading spinner gif

10. Once your app is ready, Save, Publish, and Preview the app. Whenever the user provides the new record in the form and selects the button control, click on this button, then a loading spinner will appear for some time, and it will navigate to the second screen.

This way, you can work with the Power Apps loading spinner gif.

powerapps screen loading spinner property

Power Apps Gallery Loading Spinner

In this example, I will discuss how to work with the Power Apps gallery loading spinner.

See also  Power Apps Data Table [How to Use]

I have a SharePoint Online list named “Travel Requests,” and this list contains the below fields.

Column NameData Type
Trip TitleIt is a default single line of text column
AirlineChoice
Requested ByPerson or Group
Start DateDate and time
End dateDate and time
spinner in powerapps

In Power Apps, there is a Gallery control and a Display form control. When the user selects any record from the gallery control, it will be displayed on the display form on the next screen.

Also, remember that the display form screen does not appear immediately because the selected record takes time to load. In this case, we can use a loading spinner.

To achieve it, follow the below steps. Such as:

1. On the Power Apps screen, select the Gallery control and set its OnSelect property as:

OnSelect = UpdateContext({varSpinner: true});
Set(
    varCurrentRecord,
    LookUp(
        'Travel Requests',
        ID = ThisItem.ID
    )
);
Navigate(
    'Display Records Screen',
    ScreenTransition.None
);
UpdateContext({varSpinner: false});

Where,

  • varSpinner = Power Apps variable name
  • ‘Travel Requests’ = SharePoint Online list
  • ‘Display Records Screen’ = Power Apps Second screen
powerapps spinner control

2. Now, add the Loading Spinner to the gallery screen and set its Visible property as:

Visible = varSpinner
power apps spinner

3. Finally, insert a Text label and set its Fill property to cover the entire gallery screen. Also, set its Visible property as:

Fill = RGBA(0,0,0,0.1)

Visible = varSpinner
power apps loading screen

4. Once your app is ready, Save, publish, and Preview the app. Once the user selects any specific record from the gallery control, the loading spinner appears until the display form appears.

Have a look at the below output.

power apps gallery loading spinner

This is how we can work with the Power Apps gallery loading spinner.

Power Apps Loading Spinner Data vs Controls

Lastly, I will discuss the Power Apps loading spinner data vs controls.

Loading Spinner as a ControlLoading Spinner as a Data
1. 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.1. As we discussed above, PowerApps has a built-in property called LoadingSpinner on the PowerApps Screen properties.
2. This is happening because you have the loading spinner in your app, but because the loading time is too short, a Power Apps user can not notice the variable changing value.2. This property has three different values: Data, Controls, and None. You can set it to either Data or Controls (I would prefer to set Data only). If you set the value to None, nothing will happen.
3. The code is loading too fast, so a user can not see the spinner in the current code.3. Also, it has another property named LoadingSpinner, where you can set the color.

Some more articles you may also like:

I hope you find this Power Apps tutorial helpful. This article explains what is loadingspinner PowerApps, how to work with loading spinner in PowerApps, PowerApps loading spinner property, PowerApps spinner gif with various scenarios.

If you have any opportunity to work with the Power Apps loading spinner, you can follow this post until the end to get all the information with real-time examples.

>