Power Apps Modern Spinner Control – How to Use

A Power Apps Modern Spinner Control is a graphical indicator notifying the user that content is loading or processing.

This article explains everything about the Modern Spinner Control in Power Apps, its key properties, and how to add it to the Power Apps Canvas app.

Also, we will see how to use a modern spinner control in Power Apps with a simple scenario.

Power Apps Modern Spinner Control

A Modern Spinner is an animated element in Power Apps that indicates that loading is underway. It will show up if the data loading process is slow.

This means that it assists in informing the user that the process is in busy mode and that there may be a delay before anything appears.

The image below represents how a modern spinner control looks like in Power Apps:

Power Apps Modern Spinner Control

This is the overview of a Modern spinner in Power Apps.

Power Apps Modern Spinner Properties

Next, let’s see some of the key properties of a Modern Power Apps Spinner control:

PropertyDescription
LabelSpecifies the label for the spinner.
AppearanceThere are two types of appearance. Such as;
Primary:
Modern Power Apps Spinner
Inverted:
Power Apps Spinner Appearance
Label PositionDefines the position of the label around the spinner. There are four types of label positions:
Before:
PowerApps Modern Spinner
After:
Power Apps Modern Spinner Properties
Above:
PowerApps Modern Spinner Properties
Below:
Modern PowerApps Spinner
Spinner SizeDefines the size of the spinner. There are seven different modern spinner sizes. Such as:
Tiny
ExtraSmall
Small
Medium
Large
ExtraLarge
Huge
DisplayModeIt defines whether the control allows user input (Edit), Displays data (View), or is disabled (Disabled).
VisibleSpecifies whether to display or hide the Modern Spinner control.
Position– Distance between the control’s left side and the screen’s left edge.
Y – Distance between the top of the control and the top edge of the screen.
SizeWidth – The distance between the control’s left and right sides.
Height – Distance between the control’s top and bottom.

These are the properties of a Modern Spinner in Power Apps.

See also  Power Apps Filter Gallery by Dropdown [With Examples]

Add Power Apps Modern Spinner Control

Next, we’ll see how to add a Modern Spinner Control in the Power Apps Canvas app.

First, we must enable the “Modern controls and themes” option on the Power Apps Canvas app Settings page.

  1. Sign in to Power Apps with your valid Microsoft credentials.
  2. Create a New Blank Canvas app (Apps -> + New App -> Canvas).
  3. Provide a unique name for the app (Power Apps Modern Spinner), choose the Format as Tablet, and Click on Create.
  4. On the Power Apps Screen, Click on ellipses () from the top -> Settings.
Power Apps Modern Spinner

5. From the Settings pane, Go to General -> Scroll down and Enable the Modern controls and themes as shown below. Click on Close.

PowerApps Modern Spinner Control

6. Expand the + Insert tab (from the top) -> Modern -> Select Spinner under Preview section.

Add Power Apps Modern Spinner

The modern spinner’s default name is Spinner1. You can change the spinner name later as needed.

This is how to add a Modern Spinner control in the Power Apps Canvas app.

How to Use Power Apps Modern Spinner Control

Let’s take a simple example of using a modern spinner control in Power Apps.

In Power Apps, there is an Edit form and a button [SUBMIT]. A user fills out the form and clicks on the submit button. Then, a modern spinner will appear while the form saves data. Once the data is saved in the SharePoint list, the spinner will disappear from the form.

Refer to the gif below:

How to Use Power Apps Modern Spinner Control

To achieve this, follow the instructions below:

1. I have a SharePoint list named Product Details with four different columns:

See also  Power Apps Data Table URL
ColumnData type
Product NameSingle line of text
PriceCurrency
Purchase DateDate and time
ImageImage
Modern Power Apps Spinner Control

2. In Power Apps, insert an Edit form and connect it to the above SharePoint list [Product Details]. Add a Button [SUBMIT] and apply the code below on its OnSelect property as:

OnSelect = UpdateContext({varShowSpinner: true});
SubmitForm(Form1);
NewForm(Form1)

Where,

  • varShowSpinner = Variable name
  • Form1 = Edit form name
How to Use Power Apps Modern Spinner

3. Then, select the edit form and set its OnSuccess property as:

OnSuccess = UpdateContext({varShowSpinner: false});

This code will hide the saving spinner once the form data is saved into the SharePoint list.

How to Use PowerApps Modern Spinner

4. Add a modern Spinner control in the middle of the form. Set its Label property to “Loading….“. Also, set its Visible property to the variable:

Visible = varShowSpinner
How to Use Modern Spinner in Power Apps

5. Save, Publish, and Preview the app. Fill out the form and click the SUBMIT button. The modern spinner will show until and unless the data is stored in the SharePoint list. Once the data is saved, then the spinner will hide.

This is how to use the Modern Spinner Control in PowerApps.

You may also like:

Conclusion

After reading this article, I hope you understand all about the Modern Spinner control and its key properties.

We also saw how to add a modern PowerApps spinner and how to use it in the Power Apps Canvas app with a simple scenario.

>