Preview

Overview

Make beautiful, animated loading skeletons that automatically adapt to your app.

Dependencies

The minimal supported versions are:

| ng-skeleton-loading | Minimum Angular | | :--------------: | :------: | | 0.0.16 | >= 16 | | 0.0.14 | >= 9 | | 🤌 | >= 2 |

Links

Github Link -> ng skeleton loading

NPM Link -> ng skeleton loading

Medium Link -> ng skeleton loading

Install

npm i ng-skeleton-loading --save

Usage

1. Add SkeletonLoadingModule to your module's imports

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

import { SkeletonLoadingModule } from 'ng-skeleton-loading';

@NgModule({
  declarations: [ ... ],
  imports: [ SkeletonLoadingModule ],
  bootstrap: [ ... ]
})

2. And then use this attr in any html empty tags

<div skeleton skeletonWidth="100%" skeletonHeight="4rem" skeletonRounding="small"></div>

<p skele...></p> , <h1 skele...></h1> , <button skele...></button> , ...

3. And import css in main styles

@import url('../node_modules/ng-skeleton-loading/src/assets/css/ng-skeleton-loading.css');

Options

• skeleton
• skeletonWidth
• skeletonHeight
• skeletonRounding

Tables

| Property | Type | Required | | | :--------------: | :----: | :------: | :-------------------------------------------------: | | skeletonWidth | string | Optional | Defines the width in px , rem , ... (default: 100%) | | skeletonHeight | string | Optional | Defines the height in px , rem , ... (default: 0) | | skeletonRounding | string | Optional | Displays the component as a small , large , circle , ... (default: none) |

Donation

If this project help you reduce time to develop, you can donate me a cup of coffee ...

Buy me a coffee

License

© Ramin Mehrabanian