React Skeleton - Modern Data-Loading Indicator Component

Overview

React 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.

• React Skeleton demo

Built-in themes

The React 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

React Skeleton code example

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

{ /* Import the Skeleton */ }
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
import './App.css';

{ /* To render Skeleton */ }
export default class App extends React.Component {
    render() {
        return (<SkeletonComponent  height ='15px'></SkeletonComponent>);
    }
}

Other supported frameworks

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

• Blazor Skeleton

• Angular Skeleton

• Vue Skeleton

• JavaScript Skeleton