Having trouble getting help?
Contact Support
Contact Support
Template in Angular Spinner component
5 Apr 20258 minutes to read
You can use custom templates on the Spinner instead of the default Spinner by specifying the template in the setSpinner
method.
The following steps explains you on how to define template for Spinner.
- Import the
setSpinner
method fromej2-angular-popups
library into yourapp.component.ts
as shown in below.
import { setSpinner } from '@syncfusion/ej2-angular-popups';
- Pass your custom template to the
setSpinner
method like as below.
// Specify the template content to be displayed in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>'});
You should set the template to the Spinner before creating the respective Essential® JS 2 component.
Also,until we replacesetSpinner
template, the further Essential® JS 2 component rendering is created
with given template only.
- Now, render the Essential® JS 2 component. It’s render the Spinner with the template specified in the
setSpinner
method.
In the below sample, we have rendered the Grid component with custom Spinner using
setSpinner
method.
You have to define the styles for the template inindex.css
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'
import { Component, ViewChild, OnInit } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { setSpinner } from '@syncfusion/ej2-angular-popups';
import { data } from './datasource';
@Component({
imports: [
FormsModule,
GridModule
],
providers: [
PageService,
SortService,
FilterService,
GroupService
],
standalone: true,
selector: 'app-container',
template: `
<ejs-grid #grid1 [dataSource]='gridData' (created)='onFirstGridCreated()'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120 type='number'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=140 type='string'></e-column>
<e-column field='Freight' headerText='Freight' textAlign='right' format='C' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=120 format='yMd' width=140></e-column>
</e-columns>
</ejs-grid>
<br/>
<br/>
<ejs-grid #grid2 [dataSource]='gridData' (created)='onSecondGridCreated()'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='right' width=120 type='number'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=140 type='string'></e-column>
<e-column field='Freight' headerText='Freight' textAlign='right' format='C' width=120></e-column>
<e-column field='OrderDate' headerText='Order Date' width=120 format='yMd' width=140></e-column>
</e-columns>
</ejs-grid>
`
})
export class AppComponent implements OnInit {
@ViewChild('grid1') grid_1: GridComponent | any;
@ViewChild('grid2') grid_2: GridComponent | any;
public gridData?: Object[];
constructor() {}
public ngOnInit(): void {
this.gridData = data.slice(0, 7);
}
public onFirstGridCreated(): void {
this.grid_1.hideSpinner = () => true;
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>' });
}
public onSecondGridCreated(): void {
this.grid_2.hideSpinner = () => true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
#wrapper {
margin: 0 auto;
padding-top: 20px;
}
/* csslint ignore:start */
@keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
.custom-rolling {
position: relative;
}
.custom-rolling div,
.custom-rolling div:after {
border: 16px solid #51CACC;
border-radius: 50%;
border-top-color: transparent;
height: 160px;
position: absolute;
width: 160px;
}
.custom-rolling div {
-webkit-animation: custom-rolling 1.3s linear infinite;
animation: custom-rolling 1.3s linear infinite;
top: 100px;
left: 100px;
}
.custom-rolling div:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.custom-rolling {
-webkit-transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
height: 62px !important;
transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
width: 62px !important;
}
/* csslint ignore:end */