ng-overlay-skeleton-loader
v1.0.3
Published
A lightweight Angular directive to add customizable skeleton loading states to your components.
Readme
Ng Overlay Skeleton Loader
A lightweight Angular directive to add customizable skeleton loading states to your components.
Installation
npm install ng-overlay-skeleton-loaderExample
See Example in here.
Usage
Import the directive directly into your standalone component:
import { Component } from '@angular/core';
import { SkeletonLoaderDirective } from 'ng-overlay-skeleton-loader';
// you can also import SkeltonLoadingComponent component from ng-overlay-skeleton-loader and use it as placeholder.
@Component({
selector: 'app-root',
standalone: true,
imports: [SkeletonLoaderDirective],
templateUrl: './app.component.html',
})
export class AppComponent {
isLoading = true;
}Basic Example
<div
class="py-2"
*skeleton="isLoading; width: '100%'; height: '18px'; className: 'mb-3'"
>
loading ...
</div>
Options
width– Width of the skeleton (default:'100%').height– Height of the skeleton (default:'16px').repeat– Number of skeleton items to render (default:1).borderRadius– Border radius of the skeleton (default:'4px').className– Custom classes for styling.
License
MIT © 2025
