Angular Skeleton Loader

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
width	string	"100px"	"200px", "2em", "100%", "fit-content", "auto", "0"
height	string	"2em"	"200px", "2em", "100%", "fit-content", "auto", "0"

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
size	string	"80px"	"200px", "2em", "100%", "fit-content", "auto", "0"

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
radius	string	"80px"	"200px", "2em", "100%", "fit-content", "auto", "0"

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
width	string	"100px"	"200px", "2em", "100%", "fit-content", "auto", "0"
height	string	"2em"	"200px", "2em", "100%", "fit-content", "auto", "0"
chips	number	1	0 to Inf
randomWidth	boolean	false	true, false

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
width	string	"100%"	"200px", "2em", "100%", "fit-content", "auto", "0"
height	string	"1em"	"200px", "2em", "100%", "fit-content", "auto", "0"
lines	number	2	0 to Inf

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
withPlaceholder	boolean	true	true, false

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false

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:

Parameter	Type	Default	Accepted Values
animate	boolean	true	true, false
width	string	"100%"	"200px", "2em", "100%", "fit-content", "auto", "0"
rows	number	5	0 to Inf
columns	number	4	0 to Inf
columnWidthDistribution	string[]	['35%', '10%', '10%', '15%', '15%']	"200px", "2em", "100%", "fit-content", "auto", "0" in an array (Ideally percentage)

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!