I never thought I’d blog about a loading spinner, but here we go…
I’ve implemented a Teams ordering solution to one of our customers that consists of a PowerApps app, a Flow workflow and a couple of SharePoint lists. I’ll blog about the whole solution later, but now just a quickie regarding the Loading component I created for the PowerApps app. The component is displayed to the user while the Team is being cloned and configured. This is how it looks like:
Main features of the component are: rotating bar and the text below it that fades in and out. The component exposes two properties to the user via which the user can control the loading text – “processing” above – and the color of the icon (and the text).
The component consists of three elements as displayed in the image below.
Timer2 – This is a Timer control that provides running values from zero to 3600 (= Timer2.Value). This value is used by the two other elements to create animation effect. Below you can see the most important properties for the timer control that I have used.
htmlLoadingText – This is a HTML Text control that renders the fading text below the spinner. HtmlText property of the element is below.
Notice how we use DIV element’s style property to adjust the color of the text as well as the opacity. Parent’s IconColor is one of the properties that are exposed to the user as a custom property. BTW, the property type is _Text _and not Color. I don’t know how to convert Color value into text to be used like in the formula above – let me know if you do 🙂
The opacity of the text is controlled by the formula
Abs((Timer2.Value - 1800) * 2 / 3600)
This means that the opacity changes smoothly from zero to 1.0 and then back to zero.
htmlSpinner – This HTML Text control is responsible of rendering the spinning bar. (Actually the bar is a capital letter “I” in my case, but you could as well be using an external image URL and <img /> tag to get something fancier). HtmlText property of the element is below.
See how we’re here, too, using the Timer2.Value – this time to control the rotation of the inner DIV element. The formula for the rotate CSS transformation value:
Timer2.Value / 10
As our timer’s duration is 3600 (milliseconds) our rotation value smoothly rises from zero to 360 and the starts from zero again – which is exactly what we want.
terhoantila.com 