Stackblitz Example

https://stackblitz.com/edit/ng-skeleton-demo

Overview

• Install
• Usage
• Options

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]
• [skelWidth]
• [skelHeight]
• [skelSpeed]
• [skelBackground]
• [skelDark]
• [skelLight]
• [skelText]

[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