Animated gauges for Powerapps

Thank you for visiting this article to read about my animated gauge for Power Apps.

I created this gauge animation showing a linear progress indicator increasing from 0% to 100%. I needed the colour to change at 100% to indicate that a limit had been reached. I used Adobe After Effects to create the animation and the LottieFiles plug-in to export it as a JSON-based animation format. The animation is accessed using the Lottie PCF in Power Apps.

The LottieFiles asset URL for use in Power Apps is:

https://assets10.lottiefiles.com/packages/lf20_rjwudFCJs0.json

Here's a link to a previous article where I explain how use LottieFiles within PowerApps. The example uses an animated menu that pops open and then closes when triggered by the user. The same general principles are used for the animated gauge.

https://www.gcusworth.com/post/create-eye-catching-animated-menus-for-your-power-apps

The JSON file is very lightweight and can be used many times with negligible impact on performance. This Power App uses eight gauges on one screen to show how full various collections are within the app.

Here's the same screen with a dark theme applied, making the gauge colours standout.

Once the rail appears, the coloured bar animation runs from frames 25 to 76. These are the frame numbers that need to be used for the Lottie PCF control.

Here's the code on the button that sets the animation segments and triggers the first gauge:

Set(gloVarBar1Segments, "0," & Text((CountRows(colCollection1) /2000)*50)+26);
Set(gloVarBarStart, GUID());

The gauges can be used in many situations to help visualise anything quantitively with percentages. Please feel free to try my asset link as I'd love to see other ways the gauge can be used. As always, I welcome any comments or feedback.

Thanks again for visiting the site and have a great day.