Loading animation in Angular Gantt component
18 Oct 202520 minutes to read
The Angular Gantt component displays loading indicators to provide visual feedback during data processing operations like sorting, filtering, scrolling, or data binding, enhancing user experience by signaling active processes. Configured via the loadingIndicator.indicatorType property, indicators support two types: Spinner, a rotating circular animation for quick operations, and Shimmer, an animated placeholder for data-intensive tasks like virtual scrolling with large datasets. Indicators appear automatically during initial data binding, data updates, filtering, sorting, scrolling, and expand/collapse actions, ensuring users perceive system activity. The Spinner is lightweight and ideal for simple updates, while Shimmer previews content layout for complex operations but may be resource-intensive for small datasets. Indicators support accessibility with ARIA labels and adapt to responsive designs for consistent visibility.
Configure loading indicators
Loading indicators are configured using the loadingIndicator property, with indicatorType set to Spinner (default) or Shimmer. Changes to indicatorType require component re-initialization for reflection.
The following example configures a Shimmer indicator:
export class AppComponent {
public loadingIndicator: object = {
indicatorType: 'Shimmer'
};
public data: object[] = [
// Large dataset for demonstration.
];
}This code sets a Shimmer indicator for operations like virtual scrolling, providing a modern loading experience. Use Spinner for quick operations to minimize resource usage.
The following example shows indicator usage:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { virtualData } from './data';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="450px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1"
[splitterSettings]="splitterSettings" [columns]="columns" [allowSorting]= 'true' [allowFiltering]= 'true' [labelSettings]="labelSettings"
[allowSelection]="true" [enableVirtualization]="true" [loadingIndicator]="loadingIndicator" [highlightWeekends]="true">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public loadingIndicator?: object;
public columns?: object[];
public labelSettings?: object;
public ngOnInit(): void {
this.data = virtualData,
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
this.loadingIndicator = { indicatorType: 'Shimmer' }
this.columns = [
{ field: 'TaskID' },
{ field: 'TaskName' },
{ field: 'StartDate' },
{ field: 'Duration' },
{ field: 'Progress' }
];
this.splitterSettings = {
columnIndex: 2
};
this.labelSettings = {
leftLabel: 'TaskName',
taskLabel: 'Progress'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let tempData: any[] = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2019'),
parentID: 0, Duration: 0
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7, Progress: 30
},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6, Progress: 30
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/18/2019'),
Duration: 0, parentID: 6
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/24/2019'),
Duration: 2, Progress: 30, parentID: 13
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/24/2019'),
Duration: 2, parentID: 13
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/26/2019'),
Duration: 2, Progress: 30, parentID: 18
},
{
TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/26/2019'),
Duration: 2, parentID: 18
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/30/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/30/2019'),
Duration: 2, parentID: 21, Progress: 30
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('05/02/2019'),
Duration: 2, parentID: 21
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('05/06/2019'),
Duration: 3, parentID: 21
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('05/09/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('09/14/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('05/16/2019'),
Duration: 0, parentID: 13
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('05/17/2019'),
Duration: 4, Progress: 30, parentID: 0
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('05/17/2019'),
Duration: 4, parentID: 0
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('05/23/2019'),
Duration: 5, Progress: 30, parentID: 0
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('05/30/2019'),
Duration: 5, parentID: 0
},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('06/06/2019'),
Duration: 3, parentID: 32, Progress: 45
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('06/11/2019'),
Duration: 3, parentID: 32, Progress: 50
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new Date('06/20/2019'),
Duration: 4, parentID: 38
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
export let virtualData: any[] = [];
let projId: number = 1;
for (let i: number = 0; i < 50; i++) {
let x: number = virtualData.length + 1;
let parent: any = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);
for (let j: number = 0; j < tempData.length; j++) {
let subtasks: any = {};
/* tslint:disable:no-string-literal */
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}Control loading indicators manually
For custom scenarios, such as asynchronous data processing, manually control indicators using the showSpinner and hideSpinner methods. Ensure proper ViewChild initialization to reference the Gantt component.
The following example demonstrates manual control:
export class AppComponent {
@ViewChild('gantt', { static: true })
public ganttInstance: GanttComponent;
showCustomLoading() {
// Display loading indicator manually.
this.ganttInstance.showSpinner();
// Perform custom operation
this.performCustomDataOperation().then(() => {
// Hiding loading indicator manually.
this.ganttInstance.hideSpinner();
});
}
async performCustomDataOperation(): Promise<void> {
// Simulate data processing.
return new Promise(resolve => {
setTimeout(() => {
// Custom data manipulation.
this.updateProjectData();
resolve();
}, 2000);
});
}
}This code displays a loading indicator during a simulated 2-second data operation, ensuring clear feedback. Use manual control only for specific business logic to avoid overriding automatic behavior.