An angular directive wrapper for Ladda.
(1) Get angular-ladda via Bower
$ bower install angular-ladda
or add bower.json
$ bower install angular-ladda --save
(2) add css & javascript link to html
...
<link rel="stylesheet" href="bower_components/ladda/dist/ladda-themeless.min.css">
...
<script src="bower_components/ladda/js/spin.js"></script>
<script src="bower_components/ladda/js/ladda.js"></script>
<script src="bower_components/angular-ladda/dist/angular-ladda.min.js"></script>
...
(3) add 'angular-ladda'
to your main module's list of dependencies
var myApp = angular.module('myApp', ['angular-ladda']);
(4) enjoy!
$scope.login = function() {
// start loading
$scope.loginLoading = true;
loginService.login(function() {
// stop loading
$scope.loginLoading = false;
});
}
basic
<button ladda="loginLoading" ng-click="login()">
Login
</button>
change style of effect
<button ladda="loginLoading" ng-click="login()" data-style="expand-left">
Login
</button>
change size of spinner
<button ladda="loginLoading" ng-click="login()" data-spinner-size="10">
Login
</button>
change color of spinner
<button ladda="loginLoading" ng-click="login()" data-spinner-color="#FF0000">
Login
</button>
- Fork it ( https://github.com/remotty/angular-ladda/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request