Handy angularjs module allowing masking $http requests automatically.


Added by: Sam Deering





Stars: 0

Watchers: 0

Forks: 0

Module Description

salsa-ng-loading-mask Build Status

This Angular.JS module allows masking of any DOM element (even whole body) automatically when $http or $resource request is invoked. The mask is shown once HTTP request is called (using angular's interceptors) and dismissed on either success or failure callback. You can override default stylesheet to make the mask look exactly as you want, there is also option to provide text to be shown in the mask.



You can use Bower

bower install salsa-ng-loading-mask

Then just append JS and CSS file to your HTML file. Angular.JS and jQuery must be present

<script type="text/javascript" src="bower_components/angular/angular.js"></script>

<!-- loading mask module -->
<link rel="stylesheet" type="text/css" href="bower_components/salsa-ng-loading-mask/dist/loadingMask.min.css" />
<script type="text/javascript" src="bower_components/salsa-ng-loading-mask/dist/loadingMask.min.js"></script>

There is an example folder with usage of the module. It is possible to run index.html file inside your browser without need of any server.

Add salsaNgLoadingMask module to your application dependencies. Then use config param loadingMask: true to any of your $http requests. Append a div to your page using directive salsa-loading-mask

angular.module('myApp', ['salsaNgLoadingMask', ...])
$http.get('/path', {
  loadingMask: true
<div salsa-loading-mask salsa-loading-mask-fullscreen></div>


This module uses gulp as a task runner. Install all dependencies via npm npm install and bower install. gulp build creates distribution folder. Tests may be started via npm test

Module stats last updated: 2015-04-19 02:04:52

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!