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); }; });
