NgxLoadingMask is an Angular 5+ simple loading-mask UI component.
bootstrap loading mask, loading mask react, loading overlay component, react loading npm, react loading page template, material ui loading overlay, react loader center
Todos
- Â global config
- Â customizable loading snippet comp
- Â with global config
- Â with templateDef
- Â mask container directive
- Â events observable
- Â ember layout support
- Â httpClient interceptor integrate
- Â docs
- Â unit-test cases
How to make use of it:
Installation:
npm install ngx-loading-mask --save
imports: [ ..., LoadingMaskModule.forRoot(config) ]
1. Just declare [ngxLoadingMask
] in the app container object or body
.
<div class="container" ngxLoadingMask> ... </div>
2. Similar to a global name, just declare the group name to [ngxLoadingMask] like:
<div class="wrapper" [ngxLoadingMask]="'foo'"> ... </div>
3. Just use LoadingMaskService
to switch the loading mask.
// to show mask this.service.showGroup(groupName) // to hide mask this.toggleDone(groupName)
Config
- snippet(SnippetConfig): loading snippet config object
- imgUrl(string): loading snippet uri, default:Â
null
- size(number): snippet size(in px), default:Â
144
- imgUrl(string): loading snippet uri, default:Â
- mask(MaskConfig): loading mask config object
- bgColor(string): loading mask background color, default:Â
rgba(255, 255, 255, .7)
- bgColor(string): loading mask background color, default:Â
- clsMapping(ClsMapping): class suffix
- snip(string): loading snippet class suffix, default:Â
ngx-loading-snip
- mask(string): loading mask class suffix, default:Â
ngx-loading-mask
- snip(string): loading snippet class suffix, default:Â
- debug(boolean): toggle debug mode, default:Â
false
angular 5+ loading mask component, NgxLoadingMask Plugin/Github, antd spinner overlay
See Demo And Download
Official Website(haoliangwu): Click Here
This superior jQuery/javascript plugin is developed by haoliangwu. For extra advanced usage, please go to the official website.
Be First to Comment