Types in Vue Spinner component

11 Jun 20242 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.

<template>
  <div id="app">
    <ejs-grid ref='elementRef' id='grid' :dataSource="data" :created='onGridCreated'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>

import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-grids";
import { setSpinner } from '@syncfusion/ej2-vue-popups';
import { orderDetails } from './datasource.js';

const data = orderDetails.slice(0, 7);

const onGridCreated = () => {
  setSpinner({ type: 'Bootstrap' });
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

.e-spinner-pane .e-spin-hide {
  display: block;
}
</style>
pwdtarget