How to Show Progress in Power Apps (The Easy Way)

Users like to see where they stand. Whether it’s task completion, form steps, or resource usage, a progress indicator reduces guesswork and builds confidence. Building one in Power Apps with out-of-the-box controls is possible—but it’s more work than it looks.

This guide covers two paths: the hard way (Progress Bar + Labels + Power Fx) and the easy way (a single component). Same goal: show progress clearly without maintaining brittle formulas and alignment.

Why progress indicators matter

Without a visible indicator, users wonder how much is left or whether the app is stuck. A simple “Step 2 of 5” or “60%” keeps them oriented and cuts down support questions. For forms, wizards, and quota displays, a progress indicator is a small UI piece that pays off in clarity.

The Hard Way: Building a Progress Indicator from Scratch

You can build progress using a Progress Bar and one or more Label controls. It’s a common pattern, but the details add up.

Step 1: Add the controls

1. Add a Progress Bar. Set Max to your maximum (e.g. 100 for a percentage, or total steps). Set Value to the current progress.
2. Add a Label over or next to the bar. This is where the formulas live.

Step 2: The Power Fx for the label

Set the Label’s Text property to show progress. Examples:

// "Step X of Y"
"Step " & ProgressBar1.Value & " of " & ProgressBar1.Max

// "100 / 500 GB"
ProgressBar1.Value & " / " & ProgressBar1.Max & " GB"

// Percentage (guard against Max = 0)
If(ProgressBar1.Max > 0, Text(ProgressBar1.Value / ProgressBar1.Max, "[$-en-US]0%"), "0%")

You repeat this pattern for every progress indicator and keep the label aligned with the bar.

Where it gets brittle

• Repetition: Same setup and formulas for each screen or context.
• Alignment: Keeping the label centered and aligned across screen sizes takes tweaking.
• Maintenance: Logic changes mean updating multiple controls.
• Edge cases: Value above max, or max of zero, can cause division errors or odd display. You have to handle those yourself.

This approach works and teaches Power Fx. The cost is time and upkeep for a small but important piece of UI.

The Easy Way: Using a Pre-Built Progress Indicator Component

A dedicated component skips the formulas and layout hassle. The Progress Indicator from the Power Components Kit (PCK) is one control that handles value, max, label format, and sizing.

What you get

• One control: Progress bar and label in a single component. No stacking or alignment.
• Simple properties: Set Value and Max. Choose Label: Percentage, Fraction, or none.
• Sizing: Small, Medium, or Large. Optional Color override (hex or theme).
• No Power Fx for display: The component formats “Step 2 of 5”, “60%”, or “100 / 500” for you. No division-by-zero or format strings in your app.
• Theme-aware: Built on Fluent UI. Works in Canvas and Model-Driven apps.

Add it from Insert → Get more components → Code tab → ProgressIndicator. Set the properties and bind your data.

When this makes sense

• You need one or more progress indicators (tasks, steps, quotas) and don’t want to own the formatting and alignment logic.
• You want consistent look and behavior without maintaining multiple Progress Bar + Label combos.
• You care about edge cases (zero max, value > max) being handled in one place.

Stop Building from Scratch

You can wire up Progress Bar and Labels and maintain the formulas in every app, or add a single component and set two properties. If you’re building Power Apps where progress visibility matters, a purpose-built Progress Indicator is worth a look.

Check out the Progress Indicator component.