Types in React Badge component
30 Jan 202324 minutes to read
This section explains different styles and types of the badges.
Badge styles
The Essential JS 2 Badge has the following predefined styles that can be used with .e-badge class to change the appearance of a badge.
| Class Name | Description |
|---|---|
| e-badge-primary | Represents a primary notification. |
| e-badge-secondary | Represents a secondary notification. |
| e-badge-success | Represents a positive notification. |
| e-badge-danger | Represents a negative notification. |
| e-badge-warning | Represents notification with caution. |
| e-badge-info | Represents an informative notification. |
| e-badge-light | Represents notification in light variant. |
| e-badge-dark | Represents notification in dark variant. |
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div className="sample_container">
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<div>
<span className="e-badge e-badge-primary">Primary</span>
</div>
</div>
<div className="e-card-content">
<div>
<code>.e-badge-primary</code>
</div>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-secondary">Secondary</span>
</div>
<div className="e-card-content">
<code>.e-badge-secondary</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-success">Success</span>
</div>
<div className="e-card-content">
<code>.e-badge-success</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-danger">Danger</span>
</div>
<div className="e-card-content">
<code>.e-badge-danger</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-warning">Warning</span>
</div>
<div className="e-card-content">
<code>.e-badge-warning</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-info">Info</span>
</div>
<div className="e-card-content">
<code>.e-badge-info</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-light">Light</span>
</div>
<div className="e-card-content">
<code>.e-badge-light</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-dark">Dark</span>
</div>
<div className="e-card-content">
<code>.e-badge-dark</code>
</div>
</div>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div className="sample_container">
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<div>
<span className="e-badge e-badge-primary">Primary</span>
</div>
</div>
<div className="e-card-content">
<div>
<code>.e-badge-primary</code>
</div>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-secondary">Secondary</span>
</div>
<div className="e-card-content">
<code>.e-badge-secondary</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-success">Success</span>
</div>
<div className="e-card-content">
<code>.e-badge-success</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-danger">Danger</span>
</div>
<div className="e-card-content">
<code>.e-badge-danger</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-warning">Warning</span>
</div>
<div className="e-card-content">
<code>.e-badge-warning</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-info">Info</span>
</div>
<div className="e-card-content">
<code>.e-badge-info</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-light">Light</span>
</div>
<div className="e-card-content">
<code>.e-badge-light</code>
</div>
</div>
</div>
<div className="block">
<div className="e-card e-badge-showcase">
<div className="e-card-content">
<span className="e-badge e-badge-dark">Dark</span>
</div>
<div className="e-card-content">
<code>.e-badge-dark</code>
</div>
</div>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Badge types
The types of Essential JS 2 badges are as follows:
- Circle
- Pill
- Link
- Notification
- Overlap
- Dot
- Position
Circle
The circle badge style can be applied by adding the modifier class .e-badge-circle to the target element.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Pill
The pill badge style can be applied by adding the modifier class .e-badge-pill to the target element.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Link
When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div className="badge-block">
<a href="#" className="e-badge e-badge-primary">Link Badge</a>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div className="badge-block">
<a href="#" className="e-badge e-badge-primary">Link Badge</a>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Notification
The notification badge style can be applied by adding the modifier class .e-badge-notification to the target element. Notification badges are used when a content or a context needs special attention. While using the notification badge, set the parent element to position: relative.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Dot
Dot can be applied by adding the modifier class .e-badge-dot to the target element. Dot badges are similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent element to position:relative .
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Overlap
The overlap badge can be used with notification or dot badge, which overlaps with the target element by adding the modifier class .e-badge-overlap. While using the overlap badge, set the parent element to position: relative.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div>
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
<span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
</div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>Position
The default position of the notification or dot badge is top. But, the position can be changed to bottom using the modifier class .e-badge-bottom. For example, the bottom class modifier is used with dot badge to display the status in the avatar as shown in the following sample.
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (<div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
{/* Success Colored Bottom Dot Badge */}
<span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
<div className="badge-block">
<div className="skype svg_icons"></div>
{/* Info Colored Bottom Dot Badge */}
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
{/* Info Colored Dot Badge */}
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
{/* Danger Colored Dot Badge */}
<span className="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
return (
<div>
<div className="badge-block">
<div className="firefox svg_icons"></div>
{/* Success Colored Bottom Dot Badge */}
<span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
<div className="badge-block">
<div className="skype svg_icons"></div>
{/* Info Colored Bottom Dot Badge */}
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
<div className="badge-block">
<div className="facebook svg_icons"></div>
{/* Info Colored Dot Badge */}
<span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
</div>
<div className="badge-block">
<div className="twitter svg_icons"></div>
{/* Danger Colored Dot Badge */}
<span className="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Badge Sample</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="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/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>
<link rel="stylesheet" href="index.css" />
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>