Power Apps Spinner - Modern Controls

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/the-complete-power-apps-modern-controls-guide/power-apps-spinner-modern-controls/. Author: Matthew Devaney.

Power Apps Spinner – Modern Controls Purpose

A Power Apps spinner control is a visual element that indicates to the user that content is being loaded or processed. Its purpose is to provide feedback to the user that the system is working and to alleviate anxiety or frustration caused by long loading times. Properties AccessibilityLabel

Screen readers will voice this string when a user selects the control Appearance Chooses the spinner’s style. = “Primary” = “Inverted” DisplayMode

Selects the mode: Edit, View or Disabled. In Edit mode the user can input values. In View mode the user can only see the values and in Disabled mode the control is greyed-out.

Options: = DisplayMode.Disabled = DisplayMode.Edit = DisplayMode.View Height

Distance from the top of the control to the bottom Label Text to display beside the spinner LabelPosition

Selects the label placement relative to the spinner Options: = “Above” = “After” = “Below” = “Before” OnChange

Actions that will be executed when the Value property of the progress bar changes Spinner Size Determines the spinner size

Options : = “Tiny” = “ExtraSmall” = “Small” = “Medium” = “Large” = “ExtraLarge” = “Huge” Visible

Determines whether to show (true) or hide (false) the control Width

Distance from the left side of the control to the right side X

Distance from the left edge of the screen to the left side of the control Y

Distance from the top edge of the screen to the top of the control

How To Use The Power Apps Spinner Control

1. Select the Spinner control in Power Apps studio. Write a text value in the Label property. "Loading" Code language: JSON / JSON with Comments ( json )

2. Set the Label Position property to the preferred value "After" Code language: JSON / JSON with Comments ( json )

3. Create a variable to show the spinner when true Set (varIsLoading, true ) Code language: JavaScript ( javascript )

3. Create a variable to show the spinner when true Set (varIsLoading, true ) Code language: JavaScript ( javascript )

4. Apply the variable to the Visible property of the spinner varIsLoading

5. Set the variable to false to hide the spinner Set (varIsLoading, false ) Code language: JavaScript ( javascript ) Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Spinner – Modern Controls please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.