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!