Progress Bar with Timer Control in 3 Easy Steps

If you ever find yourself needing to buy your Power Apps canvas app some loading time while your data is retrieved - or you want the user to feel like they're accessing a typical app - I have found that inserting a modern progress bar into a start page works well. With some settings tweaking, the process is fairly simple and straightforward!

1. Setting Up Your Environment

First, you'll want to create a new blank Power App.

Next,to choose a blank canvas app, click on "Create". On the next screen, you'll name your app and choose to format the app for Tablet or Phone. In this example, we will go with "Tablet" for the size. Give the app a name then proceed to the next step. *Note* You won't be able to proceed until you name the app.

By default, Power Apps creates a start screen for you. This is where we will place the progress bar, but let's create an additional screen first. You'll do this by clicking on "New Screen" in the left side "Tree View" panel, or on the toolbar above the app canvas. Then, you'll select the first option, "blank screen".

You should now see two screens listed under the Tree View. By default, Power Apps uses "Screen1, Screen2, etc" for naming. You can change the names of the screens by double-clicking the names in the Tree view.

You will want to name the screens so that they are clearly defined. For this tutorial we will use "Start Screen" and "Main Screen".

On the Main Screen, insert a text box from the Insert dropdown menu. Set its Text value to "Hey There!" and change the font size to 25.

Once the screens are created and renamed, you'll need to make sure Modern Controls and Themes are enabled in the app Settings. Access Settings by clicking "..." in the toolbar above the app canvas, then clicking the "Settings" option.

Under the General tab, scroll down until you see the Modern Controls and Themes section. Slide the toggle switch to the right to enable the feature.

Voila! Your canvas app is ready to add a modern progress bar. Now comes the fun stuff!

2. Adding the Progress Bar

Now that your environment is ready to rock and roll, let's add that modern progress bar. On the "Start Screen" page, click on the "Insert" drop down menu. With Modern Controls and Themes enabled, you will have the option to choose from "Classic" and "Modern" controls. Click on the "Modern" tab and search for "progress bar", or select it from the "Display" section.

After selecting the progress bar, it will show in Tree View under the "Start Screen". It will also be viewable on the app canvas as well. You can resize the bar as needed, but the height will pretty much remain the same.

With the progress bar selected on the canvas, the properties panel will appear, giving you control over how the progress bar looks and functions.

In the Properties panel, you will have many options to customize the bar. Feel free to play with these settings to get the desired look that you want. For this tutorial, we will set the thickness to "Large", keep the shape as "Rounded", keep the "Indeterminate" option off, and set the progress color to "Success".

3. Insert the Timer Control

Next, insert a Timer Control (located under the "Input" section of the "Classic" tab in the "Insert" dropdown menu). If you've worked with Power Apps buttons before, this will look very familiar!

Center the timer control under the progress bar. Your canvas should now look similar to this:

Select the timer control. By default, the Duration is 60,000 milliseconds, or 60 seconds. Let's change this to 5000 milliseconds, or 5 seconds.

Next, select AutoStart and set its value to "true".

Select the progress bar again and navigate to the Value property. Instead of a numeric value, we are going to now write in the formula: Timer1.Value/Timer1.Duration * 100.

Now, we will choose the OnTimerEnd property and write the following: Navigate('Main Screen', ScreenTransition.Fade). This will automatically load the Main Screen page after the timer control reaches the 5 second mark.

Ok, so we don't want that timer to be visible on the page. In order to hide it, toggle the Visible switch in the right properties panel to "Off".

At this point, you can now press the Play button (or press F5) to preview your app. Your progress bar should take 5 seconds to complete, then it should navigate to the Main Screen where earlier we set the text box that greets you with "Hey There!". Pretty cool, right?!

Follow on LinkedIn