You can add and remove a spinner using the "Show Spinner" and "Remove Spinner" actions. The positioning of the spinner is controlled by the element you will overlay e.g. a particular region or the whole page. You will specify the particular region using the "Affected Elements" attribute or leave it blank to apply it to the whole page.

By setting the "Overlay" attribute to "On Element", the overlay will cover only the element specified in the "Affected Element" attribute. Setting it to "On Page", the whole viewport will be covered and the ability to scroll the page will be disabled.

Click on one of the buttons below to display a spinner with overlay on the region/page. Note: the spinner will be automatically removed after 3 seconds.

Through the Spinner Type attribute, there are two ways to implement custom spinners in your application. Either choose one of the numerous predefined styles - Circle, Dual Ring, Ring, Ellipsis, Roller, Hourglass, Heart, Grid - or select the "Custom" option to add your own HTML and CSS. The predefined styles are based on loading.io/css.

Adding overlay to the affected region especially useful when it comes to more complex structures.

Add text to your spinners to give more context or let the users know there is still something happening.

You can specifiy:

• The text via a JavaScript function
• The interval at which it should appear (like every 6 seconds)
• The duration how long the text is visible (like for 3 seconds)

function () {
  return "Processing can take a few minutes. Please don't leave the page.";
}

function () {
  const diff = new Date() - window.uc.daStartDate;
    
  const totalSeconds = Math.floor(diff / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `Running for ${minutes} minutes and ${seconds} seconds`;
}