Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <script>
            var app = angular.module('myApp', []).run(function(){});
            app.controller('myController', ['$scope', '$timeout', function($scope, $timeout) {
                $scope.loading = false;
                
                window.getLoading = function() { return $scope.loading; }
                
                $scope.save = function() {
                    $scope.loading = true;
                    
                    $timeout(function() {$scope.loading = false;}, 3000);
                    //or
                    //setTimeout(function() { $scope.loading = false; $scope.$apply(); }, 3000);
                }
            }]);
        </script>
    </head>
    <body ng-controller="myController">
        <form ng-submit="save()" class="bs-example form-horizontal">
            <div class="form-group">
                <div class="col-lg-offset-2 col-lg-10">
                    <button type="submit" ng-disabled="loading" class="btn btn-sm btn-info">
                      <span ng-show="!loading">Save</span>
                      <img ng-show="loading" src="https://app.userapp.io/img/ajax-loader-transparent.gif">
                    </button>
                </div>
            </div>
        </form>
    </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers