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.

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

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

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