Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

ih-loading

Package Overview
Dependencies
1
Maintainers
1
Versions
59
Issues
File Explorer

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
    NPM

Version published
Maintainers
1
Weekly downloads
1,005
increased by452.2%

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 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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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