Search results

Loading Animation in JavaScript Gantt control

08 May 2023 / 1 minute to read

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.

Copied to clipboard
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' },
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="" rel="stylesheet" type="text/css"/>
    <link href="" rel="stylesheet" type="text/css"/>
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>