Types in React Spinner component

02 Feb 2023 / 2 minutes to read

By default, the Spinner is loaded in the applicable Essential JS 2 component based on the theme imported into the page. Based on the theme, the type is set to the Spinner.

The available types are:

Material
Fabric
Bootstrap

You can change the Essential JS 2 component spinner type by passing the type of the spinner as parameter to the setSpinner method like as below.

// Specify the type of the Spinner to be displayed

setSpinner({ type: 'Bootstrap'});

After Essential JS 2 component creation only, you can change the Essential JS 2 component spinner type.

[Class-component]

Source

Preview

App.jsx

App.tsx

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
// By default, Spinner is rendered with specified theme inside the Grid component.
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.gridData = data.slice(0, 7);
    }
    onGridCreated() {
        this.hideSpinner = () => true;
        // Specify the type of the Spinner to be displayed in the Grid.
        setSpinner({ type: 'Bootstrap' });
    }
    render() {
        return (<div>
            <GridComponent id='grid' dataSource={this.gridData} created={this.onGridCreated}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'></ColumnDirective>
                    <ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'></ColumnDirective>
                </ColumnsDirective>
            </GridComponent>
        </div>);
    }
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';

// By default, Spinner is rendered with specified theme inside the Grid component.
export default class App extends React.Component<{}, {}> {
private gridData: Object[] = data.slice(0, 7);

public onGridCreated(): void {
    this.hideSpinner = () => true;

    // Specify the type of the Spinner to be displayed in the Grid.
    setSpinner({ type: 'Bootstrap' });
}
render() {
    return (
        <div>
            <GridComponent id='grid' dataSource={this.gridData} created={this.onGridCreated}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'></ColumnDirective>
                    <ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'></ColumnDirective>
                </ColumnsDirective>
            </GridComponent>
        </div>
    );
}
}

[Functional-component]

Source

Preview

App.jsx

App.tsx

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';
// By default, Spinner is rendered with specified theme inside the Grid component.
function App() {
    let gridData = data.slice(0, 7);
    const [status, setStatus] = React.useState({ hideSpinner: true });
    function onGridCreated() {
        setStatus({ hideSpinner: true });
        // Specify the type of the Spinner to be displayed in the Grid.
        setSpinner({ type: 'Bootstrap' });
    }
    return (<div>
            <GridComponent id='grid' dataSource={gridData} created={onGridCreated}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'></ColumnDirective>
                    <ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'></ColumnDirective>
                </ColumnsDirective>
            </GridComponent>
        </div>);
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { setSpinner } from '@syncfusion/ej2-react-popups';
import { data } from './datasource';

// By default, Spinner is rendered with specified theme inside the Grid component.
function App() {
let gridData: Object[] = data.slice(0, 7);
const [status, setStatus] = React.useState({ hideSpinner: true });
function onGridCreated(): void {
    setStatus({ hideSpinner: true });
    // Specify the type of the Spinner to be displayed in the Grid.
    setSpinner({ type: 'Bootstrap' });
}
    return (
        <div>
            <GridComponent id='grid' dataSource={gridData} created={onGridCreated}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='right' type='number'></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='140' type='string'></ColumnDirective>
                    <ColumnDirective field='Freight' headerText='Freight' width='120' format='C' textAlign='right'></ColumnDirective>
                    <ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' textAlign='right'></ColumnDirective>
                </ColumnsDirective>
            </GridComponent>
        </div>
    );
}