ladda-angular's Introduction

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 --save

npm

You can also find ladda-angular on npm.

$ 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.

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