How To Create a Spinner Component in PowerApps

Using a spinner is a good way to show your users that your app is processing data as well as a visual to make your app appear to run quicker. Using a PowerApps component makes it is even easier to implement in your apps across multiple screens. This post will show you how to create a spinner component in PowerApps. Continue reading and you too will be an office power user! 

How-To-Create-a-Spinner-Component-in-PowerApps

First thing you should do is to have an animated image to use for your spinner and add it to your media in PowerApps

Creating the Component

From the insert menu in PowerApps select Components > New Component

  • Component
    • Name: ComponentSpinner
    • Width: 1366
    • Height: 753
    • Fill: RGBA(0, 0, 0, 0)
  • Image
    • Image: loading // You can change this to the name of the media you added for the spinner.
    • Width: 124
    • Height: 124
    • X: 632
    • Y: 297

Back in the Screens

We will insert a save icon to trigger the spinner component and then insert the spinner component.

  • Icon
    • Icon: Icon.Save
    • Width: 44
    • Height: 44
    • X: 1027
    • Y: 378
    • OnSelect:
      UpdateContext({varShowSpinner: true});
      //Put your code here that updates data. This is what will process as the spinner is displayed.
      UpdateContext({varShowSpinner: false})
  • ComponentSpinner (insert your newly created component
    • Name: ComponentSpinner_1
    • X: 0
    • Y: 0
    • Width: 1366
    • Height: 753
    • Visible: varShowSpinner

You can copy this component onto each of your screens where you need it. You simply call it by setting the “varShowSpinner” variable to true and than back to false once processing is complete.
Note: when adding this component to your screens you need to reorder the control to the front so that when the spinner is running no other control can be selected.

Now you know how to create a spinner component in PowerApps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly.  

Additional Component Resources

For more step by step guides using components please see my posts on:
how-to-create-a-popup-confirmation-in-powerapps
how-to-build-a-menu-component-in-powerapps

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are PowerApps, Power BI and Power Automate. #PowerAddict

You may also like...

4 Responses

  1. September 8, 2019

    […] PowerApps help you become more efficient in you app building. For more on components read my post how-to-create-a-spinner-component-in-powerapps. Also I used the default color blue for my menu and header rectangle. However, you can give your […]

  2. September 8, 2019

    […] For more step by step guides using components please see my posts on:how-to-create-a-spinner-component-in-powerappshow-to-build-a-menu-component-in-powerapps […]

  3. September 14, 2019

    […] how-to-create-a-spinner-component-in-powerappshow-to-create-a-popup-confirmation-in-powerapps […]

  4. October 23, 2019

    […] Do It For Mehow-to-create-a-spinner-component-in-powerappshow-to-create-a-popup-confirmation-in-powerapps […]

Leave a Reply

Your email address will not be published. Required fields are marked *