ladda-angular
Angularjs directive for Ladda button ( <300 bytes ) by @hakimel
Demo
You can also check live demo on codepen
How to use
Bower
You can Install ladda-angular using the Bower package manager.
$ bower install ladda-angular --savenpm
You can also find ladda-angular on npm.
$ npm install ladda-angularCreate your ladda button
For more information about how to create ladda button please refer ladda button repository.
The code
add the Following code into your document.
<script src="path/ladda-angular.min.js"></script>module
Add ladda dependency to your module
var myApp = angular.module("app", ["ladda"]);directive
Add directive ladda-button with your normal ladda button.
<button ladda-button="laddaLoading" data-style="expand-right" class="ladda-button"><span class="ladda-label">Submit</span></button>Directive attribute should be a scope variable with boolean or number.
true== start loading.false== stop loading.number== progress value.
Controller example
app.controller('laddaDemoCtrl', function ($scope, $interval, $timeout) {
// Example without progress Bar
$scope.showLoading = function () {
/*
Set ladda loading true
Loading spinner will be shown;
*/
$scope.laddaLoading = true;
$timeout(function () {
/*
Set ladda loading false after 3 Seconds.
Loading spinner will be hidden;
*/
$scope.laddaLoading = false;
}, 3000);
};
// Example with progress Bar
$scope.loadingWithProgress = function () {
// Set progress 0;
$scope.laddaLoadingBar = 0;
// Run in every 30 milliseconds
var interval = $interval(function () {
// Increment by 1;
$scope.laddaLoadingBar++;
if ($scope.laddaLoadingBar >= 100) {
// Cancel interval if progress is 100
$interval.cancel(interval);
//Set ladda loading false
$scope.laddaLoadingBar = false;
}
}, 30);
};
});