Press "Enter" to skip to content

Angular 5+ Simple Loading Mask UI Component | NgxLoadingMask

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
  • mask(MaskConfig): loading mask config object
    • bgColor(string): loading mask background color, default: rgba(255, 255, 255, .7)
  • clsMapping(ClsMapping): class suffix
    • snip(string): loading snippet class suffix, default: ngx-loading-snip
    • mask(string): loading mask class suffix, default: ngx-loading-mask
  • 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *