How Do I Customize the Spinner? (Magic xpa 4.x)

« Go Back


Created BySalesforce Service User
Approval Process StatusPublished

How Do I Customize the Spinner? (Magic xpa 4.x)

For customizing the spinner, you need to use template binding of Angular.

Please follow the given steps to customize the spinner:

  1. Create a template.

  2. Bind it to SpinnerTemplate of magic-root.

1. Creating a Template

[ng-template] - ng-template directive represents an Angular template.

The following template is written in app.component.html

Here are two examples of spinner templates:

Template using HTML/CSS


<ng-template #mySpinner1>

<div class="spinner" > </div>



.spinner {

width: 40px;

height: 40px;

margin: 100px auto;

background-color: blue;

border-radius: 100%;

-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;

animation: sk-scaleout 1.0s infinite ease-in-out;


@-webkit-keyframes sk-scaleout {

0% { -webkit-transform: scale(0) }

100% {

-webkit-transform: scale(1.0);

opacity: 0;



@keyframes sk-scaleout {

0% {

-webkit-transform: scale(0);

transform: scale(0);

} 100% {

-webkit-transform: scale(1.0);

transform: scale(1.0);

opacity: 0;



Template using GIF

<ng-template #mySpinner2>


<img src="Spin.gif" width="64px" height="64px">



2. Binding the template to magic-root

[SpinnerTemplate] – This is a templateRef (reference of template), which acts as input to magic root component.

When user specifies this templateRef, it is used as a spinner.

To do this in app.component.html, specify the previously created template in step 1:


<magic-root [SpinnerTemplate]="mySpinner1" > </magic-root>


Since version: 4.6