Ng-Skeleton
Stackblitz Example
https://stackblitz.com/edit/ng-skeleton-demo
Overview
Install
npm install ng-skeleton --save
Usage
Add NgSkeletonModule to your module's imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { NgSkeletonModule } from 'ng-skeleton';
@NgModule({
imports: [BrowserModule, NgSkeletonModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
And then use it in your component
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: `<ng-skeleton></ng-skeleton>`
})
export class AppComponent {
}
Options
[skelCircle]
| Property |
Type |
Required |
|
| [skelCircle] |
boolean |
Optional |
Displays the component as a circle |
[skelWidth]
| Property |
Type |
Required |
|
| [skelWidth] |
number |
Optional |
Defines the width in px (default: 100%) |
[skelHeight]
| Property |
Type |
Required |
|
| [skelHeight] |
number |
Optional |
Defines the width in px (default: 20px) |
[skelSpeed]
| Property |
Type |
Required |
|
| [skelSpeed] |
number |
Optional |
Defines the animation speed (default: 1000ms) |
[skelBackground]
| Property |
Type |
Required |
|
| [skelBackground] |
string |
Optional |
Defines a custom background color |
[skelBackground]
| Property |
Type |
Required |
|
| [skelBackground] |
string |
Optional |
Defines a custom background color (Overrides skelDark/skelLight background color) |
[skelDark]
| Property |
Type |
Required |
|
| [skelDark] |
boolean |
Optional |
Turns the skeleton into dark mode |
[skelLight]
| Property |
Type |
Required |
|
| [skelLight] |
boolean |
Optional |
Turns the skeleton into light mode |
[skelText]
| Property |
Type |
Required |
|
| [skelText] |
string |
Optional |
Pass a text into the skeleton |
Donation
If this project help you reduce time to develop, you can donate me a cup of hot chocolate (:
Buy Me A Coffee
License
MIT © Benjamin Raffetseder
