Socket
Socket
Sign inDemoInstall

ih-loading

Package Overview
Dependencies
5
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ih-loading

A simple lightweight loading spinner package. Three types of loading included. Spinner one, Ghost/skeleton loader & Full screen loader with backdrop.


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

IhLoading

This library was generated with Angular CLI version 13.3.0.

#

Installation

  1. import { IhLoadingModule } from 'ih-loading';

  2. Add IhLoadingModule to NgModule imports array. Step-1

  3. There are three types of Loading included.
    i. Spinner Loading
    all-spinner
    ii. Ghost Loading
    skeleton-loader
    iii. Full Screen Loading
    full-screen-loader

  4. 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.
loading-Title
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

Last updated on 05 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc