Re: Circle Progress Bar

R3dKap · ‎12-30-2019

Moved from Canvas App Samples Gallery.

05-11-2020 update: added new properties to choose how the value is displayed (X/Y or percentage) (see reply to the post below)

Hi all,

Based on @davidni's blog article (available here) I created a configurable Circular Progress Bar component.

Here is how it looks:

Parameters

Here are the properties you can set on the component:

INPUT

Max (number) = maximum value (default is 100)
Value (number) = actual progress value (default is 50)
ShowLabel (boolean) = shows/hides the label in the center (default is True)
LabelSize (number) = font size for the label in the center (default is 20)
LabelColor (color) = color for the label in the center (default is Black)
BarBgR, BarBgG, BarBgB (numbers) = red, green and blue components for the color of the background progress circle (default is the grey color on the capture above)
BarR, BarG, BarB (numbers) = red, green and blue components for the color of the actual progress circle (default is the cyan color on the capture above)
BarBgWidth (number) = width for the background progress circle
BarWidth (number) = width for the actual progress circle
LineCapRound (boolean) = if True draws the circle lines with a round line cap, otherwise line cap will be square (default is True)
ValueMode (text) = how to display the value within the circle: X/Y or as a percentage value (use the ValueModeEnum output property as an enumeration to set the value)
PercentageDecimals (number) = determines how many decimals are shown for the percentage value (only applicable if ValueMode is set to ValueModeEnum.Percentage)

OUTPUT

ValueModeEnum (record) = use this enumeration to set the value of the ValueMode property (MaxValue shows the value as X/Y; Percentage shows the value as a percentage value, using the PercentageDecimals property to set how many decimals should be displayed)

Feel free to use it... If you have any comments or suggestions, please do not hesitate...

You will find the component right here:

https://github.com/e-gallis/PowerApps

Emmanuel

Updates

05-15-2019: added a LabelColor property
05-21-2019: added a LineCapRound property

R3dKap · ‎05-11-2020

Hi all,

Just updated the component to allow two types of display for the value in the center:

X/Y (as before)
percentage value

So a new property called ValueMode will allow you to choose between those two modes. To set its value, use the enumeration property called ValueModeEnum like this:

ValueMode = MyCircleProgressBar.ValueModeEnum.Progress
-or-
ValueMode = MyCircleProgressBar.ValueModeEnum.MaxValue

If you choose the ValueModeEnum.Progress value for ValueMode, just know that the calculation of the current progress value will be automatic based on both the Max and the Value property values.

Also, using the PercentageDecimals property, you will be able to decide how many decimals should be displayed in case the value is shown as a percentage.

schuess3 · ‎05-15-2020

@R3dKap

You Rock! Between this one and the fabric UI icons... Thank you!

Btw... any thoughts of changing your fabric UI component into a fluent UI component?