In this blog, we'll look at how you can quickly create a PowerApps load bar with a GIF (because who doesn’t love a GIF?). View my example below.
In this context I’ve used a walking GIF and a rectangle which creates the loading bar. This is for when our app is initially starting, and we’re allowing about 5 seconds for all of our data to load up – however this is personal preference as you can set your loading feature to be as slow or as quick as you like.
Please note that the information below outlines the basic steps to creating this loading feature, however if you’re newer to Power Apps you may prefer to watch the YouTube video below:
Step 1. Add your content
First, find or create a GIF file which is going to be used for your icon. Preferably this will have a transparent background. Add the GIF to the media area of your Power App.
Step 2. Add your GIF to the screen
Add your GIF image to your desired screen. Put it in the start position, so in my scenario I want my walking GIF to start over on the left of the page at around 84 pixels in. This is set under the X property of the image.
Step 3. Add your loading bar
Add a thin rectangle which looks like a bar, and move this underneath the GIF. Alternatively you could have a chunky load bar with the GIF moving in front.
Step 4. Add your timer
The timer should have the following properties:
This is how many milliseconds the timer is going to last for, and should be the duration you want the load bar to move. In my scenario about 5 seconds is ideal. If you set this duration quicker or slower, this will make the GIF and the load bar move according to this time.
Auto start: true
On timer end: Navigate(Home, ScreenTransition.______)
Depending on your scenario you might not actually want to navigate to another page when the timer ends, however we are going to navigate to the homepage in my scenario.
Step 5. Modify the GIF’s X property
Assuming your GIF is already in the desired position from the left, we will want to use the following calculation to move it from a location on the left to a location over on the right. You may need to play around to decide where you want the GIF to end e.g. it could trail off the end of the screen, or it may end sooner at around 400 pixels.
The calculation I have outlined is a slight twist on Mikael Svenson’s blog post about automatically resizing an image with a timer, which can be found here.
The calculation for the X property should be as follows:
80 + ((400 * Timername.Value/Timername.Duration))
- 80 refers to our X start position
- 400 refers to our X end position
- Timername.Value is the current time as the timer is ticking along
- Timername.Duration is the entire duration of the timer, in my case this is 5000 or 5 seconds
Step 6. Set the width property of the rectangle
We want the rectangle's width to get larger, rather than moving its X position, therefore the rectangle's Width property should be something like this:
30+ ((400 * Timername.Value/Timername.Duration))
- 30 here refers to the original Width size.. and could start from 1
- 400 is our Width’s end position and we will usually want this to be the same as the GIF
Step 7. Play the app
Play the app and see how the animation works for you.
Consider whether you need to change the start and end positions, or whether the animation duration should change.
Step 8. Hide the timer
Once you’re happy with your changes, find the timer and set the visible mode to false.
And that’s all you need to do!
Please do feel free to leave a comment in the form at the bottom of this page if you have any feedback or questions.
Written by Chloe Lawrence, Technical Consultant
Upcoming Webinar: Empowering your business with Microsoft Power Platform
The Microsoft Power Platform, combining Power BI, PowerApps, and Automate, enables you to transform digital processes and improve the way you access and automate your data.
Join our webinar on Thursday 7th May, where we'll be covering the below:
- Improving paper and excel based processes
- Content approval processes for publishing to social media and SharePoint
- Bringing teams together using Power Apps