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%'"
|