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:
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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spinner</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 5px;
}
@keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes custom-rolling {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
.custom-rolling {
position: relative;
}
.custom-rolling div,
.custom-rolling div:after {
border: 16px solid #51CACC;
border-radius: 50%;
border-top-color: transparent;
height: 160px;
position: absolute;
width: 160px;
}
.custom-rolling div {
-webkit-animation: custom-rolling 1.3s linear infinite;
animation: custom-rolling 1.3s linear infinite;
top: 100px;
left: 100px;
}
.custom-rolling div:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.custom-rolling {
-webkit-transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
height: 62px !important;
transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px);
width: 62px !important;
}
</style>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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>);
}
}