angular-skeleton-loader v0.0.4

Angular Skeleton Loader

We all love the Angular Material Design System. Its fast, easy to set up and consists of all the components that one needs. Angular Skeleton Loader consists of skeleton loaders for commonly used Angular Material components.

Table of Content

• Angular Skeleton Loader
  • Installation
  • Basic Components
    • 1. Rectangle
      • Props
    • 2. Square
      • Props
    • 2. Circle
      • Props
    • 4. Chip
      • Props
  • Pre-made Components:
    • 1. Line
      • Props
    • 2. Input
      • Props
    • 3. Card
      • Props
    • 4. Table
      • Props
  • Note

Installation

Type the following command to install the package:

npm install angular-skeleton-loader

Basic Components

1. Rectangle

Import the AngularRectangleSkeletonModule into your component module like

import {AngularRectangleSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularRectangleSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-rectangle [animate]='false' width='500px' height='100px'></angular-skeleton-rectangle>

Props:

2. Square

Import the AngularSquareSkeletonModule into your component module like

import {AngularSquareSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularSquareSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-square [animate]='true' size='200px'></angular-skeleton-square>

Props:

2. Circle

Import the AngularCircleSkeletonModule into your component module like

import {AngularCircleSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularCircleSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-circle [animate]='true' radius='200px'></angular-skeleton-circle>

Props:

4. Chip

Import the AngularChipSkeletonModule into your component module like

import {AngularChipSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularChipSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-chip
		[animate]='true' width='200px' height='1.5em' [chips]='5' [randomWidth]='false'
></angular-skeleton-chip>

Props:

If randomWidth prop is true creates chip/s of random sizes ranging from 150px to 100px;

Pre-made Components:

Here is a list of pre-made component if you would like to use them in your application

1. Line

Import the AngularLineSkeletonModule into your component module like

import {AngularLineSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularLineSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-line [animate]='true' height='200px' width='100%' [lines]='5'></angular-skeleton-line>

Props:

2. Input

Import the AngularInputSkeletonModule into your component module like

import {AngularInputSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularInputSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-input [animate]='true' [withPlaceholder]='true'></angular-skeleton-input>

Props:

3. Card

Import the AngularCardSkeletonModule into your component module like

import {AngularCardSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularCardSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-card [animate]='true'></angular-skeleton-card>

Props:

4. Table

Import the AngularTableSkeletonModule into your component module like

import {AngularTableSkeletonModule} from 'angular-skeleton-loader';


@NgModule({
	imports: [
		AngularTableSkeletonModule,
	]
})

Update your HTML code to use the component that you like

<angular-skeleton-table [animate]='true' width='100%' [columns]='5' [rows]='10' [columnWidthDistribution]='["35%", "10%", "10%", "15%", "15%"]'></angular-skeleton-table>

Props:

Note:

This package is still a work in progress. An extensive list of components that include most if not all the components of Angular Material Design System.

Any suggestions, or component requests will be highly appreciated. Thank you!