ih-loading

IhLoading

This library was generated with Angular CLI version 13.3.0.

#

Installation

• import { IhLoadingModule } from 'ih-loading';

• Add IhLoadingModule to NgModule imports array.

• There are three types of Loading included.
  i. Spinner Loading
  
  ii. Ghost Loading
  
  iii. Full Screen Loading
  
  

• Syntax

Type	Syntax
Spinner	<ih-loading [spinnerColor]="'red'" [fontSize]="'20px'" [loadingTitle]="'Please wait'" [spinnerStyle]="'hourglass'"></ih-loading>
Ghost/Skeleton	<ih-loading [type]="'skeleton'" [width]="'240px'" [height]="'120px'" [borderRadius]="'15px'"></ih-loading>
Fullscreen Loading	<ih-loading [type]="'fullScreen'" [loadingTitle]="'Please wait'"></ih-loading>

5. Configuration

Config	Property Name	Type
Loading Type	type	String	Three types of loading available. Default spinner, Ghost/Skeleton loading and Full screen loader. [type]="'spinner'" Default Spinner [type]="'skeleton'" Ghost/Skeleton Loading [type]="'fullScreen'" Full Screen Loading
Loading Text/Title	loadingTitle	String	By default loading title is null. If you don't want to show title you can either pass empty or you can dynamically display loading title using 'hideLoadingTitle' property.
Font Size	fontSize	String	Default font size is body font size. You can set custom font size using [fontSize]="'20px'" . Any valid css unit is supported.
Spinner Style	spinnerStyle	String	[spinnerStyle]="'spinner'" , [spinnerStyle]="'hourglass'" , [spinnerStyle]="'dotted-spinner'"
Color	spinnerColor	String	[spinnerColor]="'red'", [spinnerColor]="'#28a745'", [spinnerColor]="'rgba(244,155,88,77)'", [spinnerColor]="'var(--green)'"
Hide Loading Title	hideLoadingTitle	Boolean	You can dynamically show/hide title. [hideLoadingTitle]="ifTitle ? false : true"
Width (For Skeleton Loading Only)	width	String	Supported any css valid unit. <> [width]="'150px'"
Height (For Skeleton Loading Only)	height	String	Supported any css valid unit. [height]="'70px'"
Border Radius (For Skeleton Loading Only)	borderRadius	String	Supported any css valid unit. [height]="'50%'"