Types in React Spinner component
18 Jan 202311 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]
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 {
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]
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>
);
}
export default App;