ladda-angular

Ladda button directive for angularjs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ladda-angular
12601.0.19 years ago9 years agoMinified + gzip package size for ladda-angular in KB

Readme

license travis bower npm
ladda-angular
Angularjs directive for Ladda button ( <300 bytes ) by @hakimel Demo --- Ladda angular You can also check live demo on codepen How to use ---

Bower

You can Install ladda-angular using the Bower package manager. ```sh $ bower install ladda-angular --save ```

npm

You can also find ladda-angular on npm. ```sh $ npm install ladda-angular ```

Create 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. ``` html ```

module

Add ladda dependency to your module ``` javascript var myApp = angular.module("app", "ladda"); ```

directive

Add directive ladda-button with your normal ladda button. ``` html Submit ``` Directive attribute should be a scope variable with value true or false or number.
  • true >> To start loading.
  • false >> To stop loading.
  • number >> To set progress value.

Controller example

``` javascript 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 without 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);
};
}); ```

guidelines for contributors

MIT © Sachin