Need help with ladda-angular?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sachinchoolur
127 Stars 19 Forks MIT License 36 Commits 0 Opened issues

Description

Ladda button directive for angularjs

Services available

!
?

Need anything else?

Contributors list

# 1,155
thumbna...
CSS
image-g...
Ubuntu
33 commits

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.

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

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 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 &gt;= 100) {

            // Cancel interval if progress is 100
            $interval.cancel(interval);

            //Set ladda loading false
            $scope.laddaLoadingBar = false;
        }
    }, 30);
};

});

guidelines for contributors

MIT © Sachin

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.