Placeholder Content Loader

This library is a simple collection of placeholder components, realized with the library ngneat/content-loader.

Installation

In order to install:

npm install --save placeholder-content

How to use it?

Import the module PlaceholderContentModule where do you need:

import {
  PlaceholderContentModule,
  PlaceHolderColor,
} from 'placeholder-content';

const placeholderColorScheme: PlaceHolderColor = {
  DARK: {
    background: '#333333',
    foreground: '#373737',
  },
  LIGHT: {
    background: '#eeeeee',
    foreground: '#e3e3e3',
  },
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PlaceholderContentModule.forRoot({
      theme: 'dark',
      colorScheme: placeholderColorScheme,
    }),
    // other imports...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage

In your html use component:

<div>
  <mts-card-placeholder
    [theme]="'light'"
    [animate]="true"
    [speed]="2"
    [containerClass]="['custom-class-for-container']"
  ></mts-card-placeholder>
  <div></div>
</div>

You can use these input for each component:

Name	Type	Description
theme	ThemeSchema	Theme of single placeholder (override global config). Default: 'dark'
animate	boolean	Animation of placeholder. Default: true
speed	number	Speed of animation. Default: 2
containerClass	string or Array<string>	Custom classes for placeholder container. Default: []

Components

List of components:

• Card
• Form
• Info
• Table

Card

<div>
  <mts-card-placeholder></mts-card-placeholder>
</div>

Form

<div>
  <mts-form-placeholder></mts-form-placeholder>
</div>

Info

<div>
  <mts-info-column-placeholder></mts-info-column-placeholder>
</div>

Table

<div>
  <mts-table-placeholder></mts-table-placeholder>
</div>

Compatibility

• @angular/core: ^11.0.0 (not tested with 9 and 10)

Credits

ngneat/content-loader

License

MIT