Whenever we perform operations like login or any other backend operation, generally we use some loading icon, to indicate that operation is in progress. we can use Ladda buttons in such operations to enhance the user experience. Here we are Integrating Ladda buttons in AngularJs using a module called angular-ladda.
To use use Ladda buttons first we need inject angular-ladda in our application as shown below,
var app = angular.module('app',['angular-ladda']);
Here is very simple example,
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" >Ladda Button</button>
And in our Submit() method we have two lines shown below
$scope.Loading = true;
$timeout(function() {$scope.Loading = false;}, 1000);
We can also show the progress within the buttons by using these lines.
//Index.html
<button ladda="loading_obj.expand_right_progress" class="btn btn-primary" data-style="expand-right" ng-click="Progress_click('expand-right')">Progress Button Right</button>
//In script.js
$scope.Progress_click = function(class_name) {
var Time=200;
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = true;
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = 0.1;
}, Time);
for(var i=1;i<5;i++){
Time=Time+250;
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] += loader;
}, Time);
loader=i/10;
if(i==4){
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = false;
}, Time);
}
}
};
In below code few more examples are covered.
index.html
<html ng-app="app" >
<head >
<title >Integrating Ladda Buttons in Angular js</title >
<link href="../libs/bootstrap/css/bootstrap.min.css"
rel="stylesheet" >
<link rel="stylesheet" href="../libs/angular-ladda/dist/ladda-themeless.min.css">
</head>
<body ng-controller="app-controller">
<div class="container">
<span>Basic, size and Colour Change:</span>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" >Ladda Button</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-spinner-size="30">Submit Size : 30</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-spinner-size="50">Spinner Size : 50</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-spinner-color="#8A9D1F">Spinner Color Chage</button>
</div>
</div>
<hr/>
<span>Expand Button:</span>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="expand-right">Expand-Right</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="expand-left">Expand-Left</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="expand-up" >Expand-Up</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="expand-down" >Expand-Down</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<span>Slide Buttons:</span>
</div>
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="slide-down" data-spinner-size="30">Slide-Down</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="slide-up" data-spinner-size="30">Slide-Up</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="slide-left" data-spinner-size="30">Slide-Left</button>
</div>
<div class="col-md-3">
<button class="btn btn-primary" ladda="Loading" ng-click="Submit()" data-style="slide-right" data-spinner-size="30">Slide-Right</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<span>Progress Button:</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary" ladda="loading_obj.expand_left_progress" data-style="expand-left" ng-click="Progress_click('expand-left')">Progress Button Left</button>
</div>
<div class="col-md-6">
<button ladda="loading_obj.expand_right_progress" class="btn btn-primary" data-style="expand-right" ng-click="Progress_click('expand-right')">Progress Button Right</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-6">
<span>Contract Button:</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn btn-danger" ladda="Loading" ng-click="Submit()" data-style="contract" data-spinner-size="30">Contract</button>
</div>
<div class="col-md-6">
<button ladda="loading_obj.contract_overlay" class="btn btn-danger" data-style="contract-overlay" ng-click="click('contract-overlay')">Overlay</button>
</div>
</div>
</div>
<script src="../libs/js/angular.js" ></script>
<script src="script.js" ></script>
<script src="../libs/angular-ladda/dist/spin.min.js" ></script>
<script src="../libs/angular-ladda/dist/ladda.min.js" ></script>
<script src="../libs/angular-ladda/dist/angular-ladda.min.js" ></script>
</body >
</html >
Script.js
var app = angular.module('app',['angular-ladda'])
app.controller('app-controller',function($scope,$timeout){
$scope.loading_obj = {};
$scope.Submit = function() {
$scope.Loading = true;
$timeout(function() {$scope.Loading = false;}, 1000);
}
$scope.click = function(class_name) {
$scope.loading_obj[class_name.replace('-','_')] = true;
$timeout(function(){$scope.loading_obj[class_name.replace('-','_')] = false;}, 2000);
};
$scope.Progress_click = function(class_name) {
var Time=200;
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = true;
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = 0.1;
}, Time);
for(var i=1;i<5;i++){
Time=Time+250;
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] += loader;
}, Time);
loader=i/10;
if(i==4){
$timeout(function() {
$scope.loading_obj[class_name.replace('-','_') + "_progress"] = false;
}, Time);
}
}
};
});
If you find this article helpfull consider shring this with other hoodies.
