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:
-
Create a template.
-
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
