Salesforce

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

« Go Back

Information

 
Created BySalesforce Service User
Approval Process StatusPublished
Objective
Description

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

HTML

<ng-template #mySpinner1>

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

</ng-template>

CSS

.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>

<div>

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

</div>

</ng-template>

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:

<div>

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

</div>

Since version: 4.6

Reference
Attachment 
Attachment