Canvas Apps Controls Modern Controls User Experience

Progress bar – Everything you want to know about modern control #13

A progress bar showing 30% loading done
A progress bar showing 30% loading done

Introduction to modern Progress bar control

Progress bar is one of the new modern controls in Power Apps. It is used to show the progress of some action e.g. loading of data. There are a lot of configuration options available that I will talk about below.

Properties

  1. Value - A number between 0 and max that specifies the amount of completion of a task. It is applicable only for the determinate state
  2. Max - The maximum value that indicates a task is complete
  3. Indeterminate- There are 2 options:
    1. false- the bar moves from left to right and stops with a full progress bar when a task is complete (default)
    2. true - the bar keeps moving to show an ongoing progress without showing exactly how much of a task is complete. The max and value properties are not honored when this property is set to true
  4. Thickness - The thickness of the bar. There are 2 options:
    1. 'Progress.Thickness'.Medium (default)
    2. 'Progress.Thickness'.Large
  5. Shape - The shape of the bar corners. There are 2 options:
    1. 'Progress.Shape'.Rounded (default)
    2. 'Progress.Shape'.Square
  6. ProgressColor - There are 4 options:
    1. 'Progress.ProgressColor'.Brand (default) - color based on theme
    2. 'Progress.ProgressColor'.Success - green color
    3. 'Progress.ProgressColor'.Warning - orange color
    4. 'Progress.ProgressColor'.Error - red color

Using modern Progress bar control

Prior to this control, I always used to download a progress/loading gif and upload that to the app. With this control, loading or showing progress in all my apps is now consistent. Here is a quick demo showing the difference between indeterminate and determinate states:

Progress Bar Demo
Demo

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

  1. Number input - Everything you want to know about modern control #12
  2. Link – Everything you want to know about modern control #11
  3. Information button – Everything you want to know about modern control #10

Leave a Reply