Angular Skeleton - Modern Data-Loading Indicator Component

Overview

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

• Angular Skeleton demo
• Angular Skeleton getting started documentation

Built-in themes

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

Angular Skeleton code example

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

<div class="control-section">
    <ejs-skeleton height="15px"></ejs-skeleton>
</div>

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<!-- To Render Skeleton -->
          <ejs-skeleton height="15px"></ejs-skeleton>`
})
export class AppComponent { }

Other supported frameworks

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

• Blazor Skeleton

• React Skeleton

• Vue Skeleton

• JavaScript Skeleton