Power Apps is a powerful platform for building business applications. However, when an app performs a process or fetches data that takes time, users can become confused or frustrated, if there is no feedback. Adding a loading animation enhances user experience by clearly indicating, that the app is processing a request.
The animation looks like this: A primary button with the label ‘Save’ including a ‘Save’ icon to the left of the label. When the user selects the button, it becomes disabled, the icon changes to an animated loading spinner, and the label now shows ‘Saving…’ Once the operation is completed, the button returns to its original state.
Let’s get started!
Firstly, log in to https://make.powerapps.com.
Click Create on the Home page and select the Blank app,
Now click Create button under the Blank Canvas App.
On creating your canvas app, you will see three dots Icon, click on it, select settings.
If you haven’t enabled modern controls and themes yet, you can do so in the Settings of your Power Apps Studio.
Add a new button to your screen, assign it a proper name, set a clear label for the text, and select an appropriate icon.
Add a Timer control with the Repeat property enabled to ensure the timer's functionality is recurring for tasks requiring periodic execution.
Set the Duration property based on your requirements to control the time interval for the Timer's execution cycle.
Repeat | This ensures that the timer restarts automatically once it completes its duration. It allows the animation to keep running. |
Duration | This is the speed of your animation. You can tweak this value to adjust the animation speed to your reference |
OnTimerEnd | We create a context variable since we are staying on the same screen. The variable is updated each time by 15 and it will reset to 0 once it exceeds 359. |
Use the OnTimerEnd property to define actions that should occur automatically when the Timer completes its cycle, ensuring seamless task execution.
In the OnSelect property, create a new variable to indicate the start of the operation, setting it to true initially; once the operation is completed, reset the variable to false to track the process status effectively.
I have included a flow to introduce a short delay, allowing sufficient time to observe the animation, which enhances the tutorial's clarity and effectiveness.
Now, click the button. In the display content, choose the icon.
Use the expression If(local, "Arrowsync," "Save") to dynamically select the appropriate action or label based on the local condition's value, ensuring context-specific functionality.
Click on the IconRotation and use the following expression.
If(local, ctxRotatingAngle, 0)
It dynamically adjust the icon's rotation angle and ensures the icon visually reflects the current state by rotating when the condition is true and resetting to its default position otherwise.
Then update the following properties in your button control:
Text | If(local, ctxRotationgAngle ,0) |
DisplayMode | If(local, DisplayMode.Disable, DisplayMode.Edit) |
The timer starts as soon as the operation (ctxRotationgAngle) begins. Update the start property of the timer with: ctxRotationgAngle.
Save and preview the app to test it.
Finally, you’ve successfully transformed your button into a UX-friendly, animated loading spinner.
Frequently Asked Questions (FAQs)
1. Why is a loading animation important in PowerApps?
A loading animation provides visual feedback to users that the app is processing data or performing an action. It prevents users from assuming the app is unresponsive, improving overall user experience and reducing frustration.
2. How can I show and hide a loading animation in PowerApps?
You can control the visibility of a loading animation using a variable. For example: Use Set(varLoading, true) before starting a process. Set Set(varLoading, false) after the process completes. Set the Visible property of the animation to varLoading.
3. Where can I get loading animations for PowerApps?
You can create or download loading animations (GIFs) from websites like:
Use tools like Adobe After Effects or Canva to design custom animations.
4. Can I use a timer instead of a loading animation for processes?
Yes, you can simulate a loading process using the Timer control. For example: Start a timer when a process begins. Set the timer’s OnTimerEnd to finish the process and hide the animation.
5. How do I make the loading animation appear on top of everything else?
To ensure the loading animation appears on top: Place the animation image at the top layer of the screen using the Reorder option. Add a transparent rectangle behind the animation to dim the screen, improving visibility.
