angular-ladda

An angular directive wrapper for Ladda.

Demo

$scope.loading.items = [];
for(var i=0; i<20; i++) {
  $scope.loading.items.push({ name: 'item ' + i, loading: false });
}
$scope.clickArrayBtn = function(idx) {
  $scope.loading.items[idx].loading = true;
  $timeout(function() {
    $scope.loading.items[idx].loading = false;
  }, 2000);
};

Usage

(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']);

Control

start loading

set true value

<button ladda="true">Button</button>

stop loading

set false value

<button ladda="false">Button</button>

set progress

set float value

<button ladda="0.1">Button</button>

Quick Examples

controller

$scope.clickBtn = function() {
  $scope.loading = true; // start loading
  $timeout(function() {
    $scope.loading = false; // stop loading
  }, 2000);
}

view

default(zoom-in)

<button ladda="loading" ng-click="clickBtn()">
  Button
</button>

change styles

use data-style attribute

<button ladda="loading" ng-click="clickBtn()" data-style="expand-right">
  Button
</button>

• expand-left
• expand-left
• expand-right
• expand-up
• zoom-in
• zoom-out
• slide-left
• slide-right
• slide-up
• slide-down
• contract

change size

use data-spinner-size attribute

<button ladda="loading" ng-click="clickBtn()" data-spinner-size="30">
  Button
</button>

• 10
• 20
• 30
• any size(number)

change spinner color

use data-spinner-color attribute

<button ladda="loading" ng-click="clickBtn()" data-spinner-color="#000000">
  Button
</button>

Link

Ladda