Animations for Power Apps

Add animated progress indicators and charts to visualize data and loading states. These components bring life to your dashboards and feedback experiences.

When to use animations

Animated components work great for showing progress, visualizing completion percentages, and providing feedback during loading or processing operations.

Choose your animation component

Modern Progress Bar

Horizontal progress bar with smooth animation. Shows percentage completion with optional label.

Best for: File uploads, form completion tracking, multi-step processes, and loading indicators.

Settings you can customize:

• Bar width and height
• Animation duration
• Show/hide percentage text
• Trigger button text
• Progress color

Modern Progress Circle

Circular progress indicator with animated fill. Shows percentage in the center of the circle.

Best for: Dashboard KPIs, completion metrics, single statistic displays, and status indicators.

Settings you can customize:

• Circle size (width/height)
• Stroke width (ring thickness)
• Animation duration
• Show/hide value text
• Label text

Implementation steps

1. Select your animation

Go to Animations and choose the component that fits your visualization needs.

2. Configure the animation

Click on your chosen component and use the Settings tab to adjust:

• Size - Width, height, stroke width
• Animation - Duration of the fill animation
• Display - Show/hide percentage labels
• Colors - Match your app's design

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect to dynamic data

After pasting, connect the animations to real data:

Set progress from variable

// Progress bar - set percentage (0-100)
varUploadProgress

// On timer or update
Set(varUploadProgress, varUploadProgress + 10)

Calculate from data

// Circle chart - calculate completion percentage
CountRows(Filter(Tasks, Status.Value = "Complete")) / CountRows(Tasks) * 100

Animate on button click

// Start progress animation
Set(varShowProgress, true);
Set(varProgressValue, 0);

// Timer to increment (in Timer.OnTimerEnd)
If(varProgressValue < 100,
    Set(varProgressValue, varProgressValue + 5),
    Set(varShowProgress, false)
)

Bind to form completion

// Track form fields filled
(
    If(!IsBlank(txtName.Text), 25, 0) +
    If(!IsBlank(txtEmail.Text), 25, 0) +
    If(!IsBlank(txtPhone.Text), 25, 0) +
    If(!IsBlank(txtAddress.Text), 25, 0)
)

Show loading during data operation

// Before operation
Set(varIsLoading, true);
Set(varProgress, 0);

// After operation completes
Set(varProgress, 100);
Set(varIsLoading, false)

Common use cases

File upload indicator

Use Progress Bar to show upload progress. Update the percentage as the file uploads.

Form completion tracker

Use Progress Bar to show users how much of a form they've filled out. Encourages completion.

Dashboard KPI

Use Progress Circle to show a key metric like "85% of tasks complete" or "Revenue: 72% of goal".

Loading feedback

Use Progress Bar with animation to indicate that data is loading or processing.

Goal tracking

Use Progress Circle to visualize progress toward a target - sales quota, project milestones, etc.

Step indicator

Use Progress Bar to show current step in a multi-step process (Step 2 of 5 = 40%).

Best practices

• Match animation speed to operation - Fast animations for quick operations, slower for longer processes
• Show meaningful percentages - Don't fake progress, show real completion when possible
• Add context - Include labels like "Uploading..." or "75% Complete"
• Consider color - Green for success/completion, blue for neutral progress
• Don't overuse - One or two animated elements per screen is usually enough
• Handle completion - Show success state when progress reaches 100%

Troubleshooting

Animation not starting

Check that your progress variable is updating. The component animates when the value changes.

Progress stuck at wrong value

Verify your calculation returns a number between 0 and 100. Check for division by zero if calculating percentages.

Animation too fast/slow

Adjust the animation duration in settings. Typical values are 0.5s to 2s.

Percentage text not showing

Make sure "Show Value" or "Show Percentage" is enabled in settings.

Circle not rendering correctly

Check that width and height are equal for a perfect circle. Unequal values create ellipses.