JavaScript Skeleton - Modern Data-Loading Indicator Control

Overview

JavaScript Skeleton is a modern data-loading indicator that shows a preview of how the page is going to be displayed with a shimmer effect. It improves the user experience by informing users of ongoing processes.

• JavaScript Skeleton demo
• JavaScript Skeleton getting started documentation

Built-in themes

The JavaScript Skeleton supports built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve the desired look and feel by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio application

JavaScript Skeleton code example

Easily get started with the JavaScript Skeleton using a few simple lines of HTML and TS code example as demonstrated below. Also explore our JavaScript Skeleton Example that shows you how to render and configure the JavaScript Skeleton.

<div>
    <div id='skeleton'></div>
</div>

import { Skeleton } from '@syncfusion/ej2-notifications';

// Initialize the Skeleton component
let skeleton: Skeleton = new Skeleton({ height:"15px" });

// Render initialized Skeleton
skeleton.appendTo('#skeleton');

Other supported frameworks

The Skeleton control is also available in Blazor, Angular, React, and Vue frameworks. Check out the control on other platforms using these links:

• Blazor Skeleton

• Angular Skeleton

• React Skeleton

• Vue Skeleton