Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase
Frequently Asked Questions

Add Spinner To A Button

Display spinner on a button while the data loads

Blank Profile Image
Written by Ashish Gupta
Updated 3 years ago
Less than a minute read

When the data is loading on a button click, you may want to disable the button and show a spinner on it. It gives your users an indication that they need to wait for the app to finish processing.

Spinner on a Raised Button

When using a raised button that calls a method to load data, add a Progress Spinner as a button's child element. You will also need to style the spinner to overlap it with the button. In your User Interface Properties section, create a boolean property isOrderProcessing, which will be used to show/hide the spinner and to disable/enable the button.

Spinner on a raised button

Click on style on the Progress Spinner header and add the following style:

mat-spinner {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
}

In the top/left calculation above, 10px is half the diameter of the spinner. So, when using a spinner with diameter 40, set top and left values to:

calc(50% - 20px)

In your User Interface Method that is called on the button click, you will need to set the booleans before and after the api call:

this.isOrderProcessing = true;    //disable the button and show the spinner

//call the behavior to process data
await this.httpClient.post('/api/Orders/process');

//reset after the call is complete
this.isOrderProcessing = false;    //enable the button and hide the spinner

Spinner on an Icon Button

When using an icon button, you would need to change the button like this:

Add a Spinner on an icon button

There is no change in style and user interface method.

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants