Styles in EJ2 TypeScript Skeleton control
29 Aug 20232 minutes to read
You can customize skeleton control in the below ways.
cssClass
You can customize the style of a Skeleton control by using cssClass
. The appearance of JavaScript Skeleton can be customized by changing the wave color, background color, width, and height. For detailed information, refer styles.css
file below.
import { Skeleton } from '@syncfusion/ej2-notifications';
// Initialize Skeleton control
let circle: Skeleton = new Skeleton({
shape: 'Circle',
width: "60px",
cssClass: 'e-customize'
});
// Render initialized Skeleton
circle.appendTo('#circleSkeleton');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Skeleton</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<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-notifications/styles/material.css" rel="stylesheet" />
<link href="styles.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='loader'>LOADING....</div>
<div id='container'>
<div style="position:relative;min-height:310px;border:1px solid; padding:20px;">
<div id="circleSkeleton"></div>
</div>
</div>
</body>
</html>
Visible
You can use the visible
property which defines the visible state of Skeleton.
import { Skeleton } from '@syncfusion/ej2-notifications';
// Initialize Skeleton control in hidden state
let circle: Skeleton = new Skeleton({
shape: 'Circle',
width: "60px",
visible: false
});
// Render initialized Skeleton
circle.appendTo('#circleSkeleton');