Spinners
If you have content that will take a long time to load, you should give the user feedback. For this reason we provide progress indicators.
Using Dynamic Actions
Two Dynamic Actions are provided with the theme.

Material APEX - Show Spinner has 3 settings:

  • Affected Element: Where the spinner will be. If empty, the spinner will be on the body element.
  • Size: Big or small. If empty, the spinner will have a standard size.
  • Color: Red, Blue, Yellow, Green. If empty, the spinner will circle these four colors.

Material APEX - Remove Spinners removes all active spinners from the page.

Using JavaScript
Material APEX overwrites apex.util.showSpinner() with the same arguments, so you can use the same code as you would using Universal Theme.
Examples
// adds a spinner to the body
spinner.remove();
var spinner = apex.util.showSpinner();

// adds a spinner to #some-region
var spinner = apex.util.showSpinner("#some-region");
spinner.remove();

// adds a big spinner to #some-region
var spinner = apex.util.showSpinner("#some-region", {size:"big"});
spinner.remove();

// adds a big blue spinner to #some-region
var spinner = apex.util.showSpinner("#some-region", {size:"big",color:"blue"})
spinner.remove();

// adds a small yellow spinner to #some-region
var spinner = apex.util.showSpinner("#some-region", {size:"small",color:"yellow"}); 
spinner.remove();