The loading indicator is used to display a visual indicator while the Gantt is fetching data or performing certain actions, such as sorting or filtering. The gantt support two indicator types, which is achieved by setting the loadingIndicator.indicatorType property to Shimmer or Spinner. The default value of the indicator type is “Spinner.”
In the following sample, the Shimmer indicator is displayed while the gantt is scrolled when using the virtual data.
import { Gantt, Sort , Selection, VirtualScroll, Filter} from '@syncfusion/ej2-gantt';
import { virtualData } from 'datasource.ts';
Gantt.Inject(Sort, Selection, VirtualScroll, Filter);
let gantt: Gantt = new Gantt({
dataSource: virtualData,
height: '450px',
allowSorting: true,
allowFiltering: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
},
enableVirtualization: true,
loadingIndicator: { indicatorType: 'Shimmer' },
columns: [
{ field: 'TaskID' },
{ field: 'TaskName' },
{ field: 'StartDate' },
{ field: 'Duration' },
{ field: 'Progress' },
],
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2-notifications/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>