Getting started in EJ2 TypeScript Spinner control

12 Apr 20254 minutes to read

This section explains how to create a simple Spinner component and configure its available functionalities in TypeScript, using Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Set up development environment

Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

After cloning the application in the ej2-quickstart folder, run the following command line to navigate to the ej2-quickstart folder.

cd ej2-quickstart

Add Syncfusion® JavaScript packages

Syncfusion® JavaScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

npm install

Import the Syncfusion® CSS styles

To render Spinner component, need to import Popups and its dependent components styles as given below in in the ~/src/styles/styles.css file, as shown below:

@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';

Initialize the Spinner using createSpinner method and show/hide the spinner using showSpinner and hideSpinner methods accordingly. Set the target to the spinner to render it based on specific target.

The following steps explains you on how to create and how to show/hide your Spinner.

  • Import the createSpinner method from ej2-popups library into your file as shown in below.
import { createSpinner } from '@syncfusion/ej2-popups';
  • Show and hide this spinner by using showSpinner and hideSpinner methods for loading in your page and import them in your file as shown in below.
import { showSpinner, hideSpinner } from '@syncfusion/ej2-popups';

Create the Spinner globally

The Spinner can be render globally in a page using public exported functions of the ej2-popups package.

import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';

//createSpinner() method is used to create spinner

 createSpinner({

  // Specify the target for the spinner to show

        target: document.getElementById('container')

    });

// showSpinner() will make the spinner visible

 showSpinner(document.getElementById('container'));

setInterval(function(){

  // hideSpinner() method used hide spinner
  hideSpinner(document.getElementById('container'));

}, 100000);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Spinner</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript NumericTextBox Component" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='container'>
       
    </div>
</body>
</html>