ng-skeleton

Ng-Skeleton

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