Skip to content
Ladda button directive for angularjs
Branch: master
Clone or download
Latest commit 2e91e70 Sep 25, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist dist filename update.. Mar 7, 2015
samples added sampele folder.. May 14, 2015
src Jscs fixes.. Sep 25, 2015
test Added demo.. Mar 1, 2015
.editorconfig Qunit Test Mar 1, 2015
.gitignore Added demo.. Mar 1, 2015
.jscsrc Jscs updates.. Sep 25, 2015
.jshintrc Qunit Test Mar 1, 2015
.travis.yml Travis update Mar 1, 2015
Gruntfile.js dist filename update.. Mar 7, 2015
LICENSE Initial commit Feb 26, 2015
README.md Update README.md Sep 25, 2015
bower.json version 1.0.1 release Mar 7, 2015
contributing.md First build.. Feb 28, 2015
package.json version 1.0.1 release Mar 7, 2015

README.md

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.

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

guidelines for contributors

MIT © Sachin

You can’t perform that action at this time.