- Exciting release!Introducing "safe npm". Learn more →
ih-loading
Advanced tools
ih-loading
A simple lightweight loading spinner package. Three types of loading included. Spinner one, Ghost/skeleton loader & Full screen loader with backdrop.
- 1.0.0latest
- Version published
- Maintainers
- 1
- Weekly downloads
- 1,005
- increased by452.2%
Weekly downloads
Readme
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%'" |
Keywords
FAQs
A simple lightweight loading spinner package. Three types of loading included. Spinner one, Ghost/skeleton loader & Full screen loader with backdrop.
The npm package ih-loading receives a total of 1,004 weekly downloads. As such, ih-loading popularity was classified as popular.
We found that ih-loading demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.