This control is a custom HTML button with a dynamic loading spinner for Power Apps. When clicked, it displays a spinner and updates its text based on the locLoading variable. It provides clear feedback to users during asynchronous actions, such as form submissions or API calls. The button is fully customizable in appearance, with editable styles for color, size, and font. It ensures a responsive and interactive user experience in your Power Apps applications.

Usage Instructions for HTML Button with Loading Spinner in Power Apps

This guide explains how to use the provided HTML code and integrate it into your Power Apps application. The button will display a loading spinner and change its text dynamically based on the locLoading variable.

Steps to Implement

1. Add the HTML Code to Your Power Apps App

   • Insert an HTML Text control into your app. • Copy and paste the provided HTML code into the HTMLText property of the control.

2. Set the OnSelect Property

   • Add the following code to the OnSelect property of the button or relevant control that triggers the loading process:

UpdateContext({locLoading:true}); // YOUR CODE GOES HERE // UpdateContext({locLoading:false});

•	Replace // YOUR CODE GOES HERE // with the logic you want to execute while the button is in the loading state.

3. Customize the Button Appearance

•	You can modify the styles in the HTML code to fit your app’s theme:
•	Button color: Change background:crimson; to your desired color.
•	Spinner size: Adjust the height and width values in the <img> tag.
•	Button text font and size: Update font-size:16px; and font-weight:600;.

4. Bind the locLoading Variable

•	Ensure that the locLoading variable is initialized in your app. You can do this in the OnStart property of your app or the screen:

UpdateContext({locLoading:false});

5. Testing the Button

   • Click the button in preview mode. The button will: • Show the spinner and display “Loading” when locLoading is true. • Revert to “Send data” when locLoading is false.

Expected Behavior

•	Initial State: The button displays “Send data” with no spinner.
•	Loading State: When locLoading is set to true:
•	A spinner appears next to the button text.
•	The text changes to “Loading”.
•	Completion State: After your code executes, the button reverts to its initial state.

Example Use Case

You can use this button for submitting forms, triggering API calls, or other asynchronous processes, providing a clear visual indication of ongoing operations to users.

Code Snippet Recap

HTML Code:

With({loader:"data:image/svg+xml; utf-8, " & EncodeUrl($"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><radialGradient id='a11' cx='.66' fx='.66' cy='.3125' fy='.3125' gradientTransform='scale(1.5)'><stop offset='0' stop-color='#FFFFFF'></stop><stop offset='.3' stop-color='#FFFFFF' stop-opacity='.9'></stop><stop offset='.6' stop-color='#FFFFFF' stop-opacity='.6'></stop><stop offset='.8' stop-color='#FFFFFF' stop-opacity='.3'></stop><stop offset='1' stop-color='#FFFFFF' stop-opacity='0'></stop></radialGradient><circle transform-origin='center' fill='none' stroke='url(#a11)' stroke-width='15' stroke-linecap='round' stroke-dasharray='200 1000' stroke-dashoffset='0' cx='100' cy='100' r='70'><animateTransform type='rotate' attributeName='transform' calcMode='spline' dur='2' values='360;0' keyTimes='0;1' keySplines='0 0 1 1' repeatCount='indefinite'></animateTransform></circle><circle transform-origin='center' fill='none' opacity='.2' stroke='#FFFFFF' stroke-width='15' stroke-linecap='round' cx='100' cy='100' r='70'></circle></svg>"),isLoading:locLoading, text:If(!locLoading, "Send data", "Loading") },

$"<button style='display:flex; align-items:center; justify-content:center; gap:8px;padding:8px 8px; width:100%; background:crimson; color:white; border-radius:4px; border:none; font-weight:600; font-size:16px; box-shadow: 4px 2px 0px 0px rgba(0,0,0,.1);'> <img src='{loader}' height=20px; width=20px; style='display:{If(locLoading, "block", "none")};' ><span>{text}</span> </button>" )

OnSelect Property:

UpdateContext({locLoading:true}); // YOUR CODE GOES HERE // UpdateContext({locLoading:false});