Power Apps Loading Bar

Hi all, I’m happy to have some extra time now to focus on some blogs and today I’m going to be writing about how we can create a funky little PowerApps load bar with a GIF (because who doesn’t love a GIF?).

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 which can be found here:

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:

Duration: 5000

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 Home page 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:

https://www.techmikael.com/2016/11/creating-resize-animation-in-powerapps.html

The calculation for the X property should be as follows:

80 + ((400 * Timername.Value/Timername.Duration))

Step 6. Set the Width property of the rectangle

We want the rectangles width to get larger, rather than moving its X position, therefore the rectangles 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!

Thanks for taking the time to read this and hopefully this can help make your apps even more exciting!

Please do feel free to leave a comment below if you have any feedback or questions.