Guidelines to use this component.

This component works much the same as the OutSystems Loading Button widget. It consists of a widget with a placeholder button inside with the loading div, loading text, success icon and text and fail icon and text - any of which you can edit or remove.

Note that you will need a local variable to use as the IsLoading input (exactly the same as the OutSystems version of the Loading Button). The components inside of the button, as previously mentioned, can be changed in terms of content or removing them entirely if not wanted - however, DO NOT remove the CSS that is on them as this will affect the functionality. Note that the Loading text is an expression and as such can be changed during the loading period if you chose to show different messages at different times to indicate what is currently happening during the loading process.

The success and fail icons and messages are triggered by the Client actions found in the widget. Simply place the respective one at the end of the flow and just before you change the IsLoading input to false. This will cause the success or fail messages and icons to show for the duration you specified in the input before reverting to the original state.

The new animated icons come from https://codepen.io/iAmEcko/pen/oQQXzr