1.0.3 • Published 4 years ago
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
| Property | Type | Required | |
|---|
| skelCircle | boolean | Optional | Displays the component as a circle |
| Property | Type | Required | |
|---|
| skelWidth | number | Optional | Defines the width in px (default: 100%) |
| Property | Type | Required | |
|---|
| skelHeight | number | Optional | Defines the width in px (default: 20px) |
| Property | Type | Required | |
|---|
| skelSpeed | number | Optional | Defines the animation speed (default: 1000ms) |
| Property | Type | Required | |
|---|
| skelBackground | string | Optional | Defines a custom background color |
| Property | Type | Required | |
|---|
| skelBackground | string | Optional | Defines a custom background color (Overrides skelDark/skelLight background color) |
| Property | Type | Required | |
|---|
| skelDark | boolean | Optional | Turns the skeleton into dark mode |
| Property | Type | Required | |
|---|
| skelLight | boolean | Optional | Turns the skeleton into light mode |
| 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