Ngx-Input-Loader
An Angular 4+ plugin to add loading spinners to your input fields seamlessly.
Table of contents
Live DEMO
Installation
To install this library, run:
$ npm install ngx-input-loader --save
Usage
Import NgxInputLoaderModule
in the root module (app.module.ts
)
...;
Use the ngxInputLoader
directive by binding it to a boolean value in the component's html (any.component.html
)
- INPUTS
- BUTTONS
SUBMIT <!-- OR -->
Configuration
Available Options
-
loader -
Type of loader to use. See loaders for the list of available loaders. Default:rolling
. -
position -
Position of the loader on the input or button element. Default:right
.- Options:
right
,left
¢er
.
- Options:
-
color -
Color of the loader. All supported color formats can be used. Default:#000
. -
background -
Background of the element when the loader is visible. Images withurl('path/to/image')
can also be set as background. Default:#fff
. -
padding -
Padding to the loader w.r.t. the element. Default:10px
.- In case of
position: 'right'
(default) only padding-right is applied. - In case of
position: 'left'
, only padding-left is applied. - In case of
position: 'center'
, no padding will be applied even if specified.
- In case of
-
height -
Relative height of the loader w.r.t. the element. Default:1
. -
opacity -
Opacity of the loader. Default:1
. -
speed -
Speed of the loader. Default:1000
(in milli-seconds). -
padButton -
Whether to pad the button to make space for the loader when it's visible. It will pad if the element is abutton
orinput[type="submit"]
orinput[type="button"]
else it won't, even if specified.- Options:
true
orfalse
.
- Options:
Modular Level Configuration
Pass in the configuration object in the forRoot
method of the NgxInputLoaderModule
in the imports array of your root module (app.module.ts
)
...;
Element Level Configuration
Add ngxInputLoaderConfig
property binded to the configuration object to your html element.
Note-
This will override your modular level configuration (if any) just for this specific element.
<!-- In case any property is not specified, modular level configuraition will be used (if any) else default options are used. -->
Loaders
Types of Loaders Available -
- 'ball-bounce'
- 'ball-ellipsis'
- 'ball-fading-shrink'
- 'ball-fading'
- 'ball-fountain-fading'
- 'ball-fountain'
- 'ball-interwind'
- 'ball-line'
- 'ball-mini'
- 'ball-planets'
- 'ball-spinner-double'
- 'ball-spinner'
- 'ball-triangle'
- 'bars-music'
- 'bars-trespassing'
- 'bars'
- 'circles-spinner'
- 'circles'
- 'clock'
- 'dots-triple'
- 'drops-fading'
- 'eclipse'
- 'flickr'
- 'gear'
- 'grid'
- 'oval'
- 'pendulum'
- 'ring-broken'
- 'ring-double'
- 'ring-dual'
- 'ripple-inbound'
- 'ripple'
- 'rolling-short'
- 'rolling'
- 'segments'
- 'snake-chasing'
- 'snake-full'
- 'snake-solid'
- 'tail-spin'
- 'triangle-spin-triple'
- 'twirl'
- 'typing'