Template in Angular Spinner component

26 Feb 20268 minutes to read

Use custom templates for the Spinner instead of the default spinner by specifying the template in the setSpinner method.

The following steps describe how to define a custom template for the Spinner:

Step 1: Import the setSpinner method from the ej2-angular-popups library into your app.component.ts.

import { setSpinner } from '@syncfusion/ej2-angular-popups';

Step 2: Pass your custom template to the setSpinner method.

// Specify the template content to display in the Spinner
setSpinner({ template: '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>'});

Set the spinner template before creating the respective Essential JS 2 component. Until you replace the setSpinner template, all subsequent Essential JS 2 component rendering uses the specified template.

Step 3: Render the Essential JS 2 component. The Spinner displays with the template specified in the setSpinner method.

The following sample renders a Grid component with a custom spinner using the setSpinner method. Define the styles for the template in index.css.

app.component.ts

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;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

index.css

#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 */