How to add a spinner while loading the content in AngularJS?

Question

I am using button spinner while loading the content, when the user clicks on the \"Search\" button content will load, at this time buttonLabel will be changed t

Answer 1

Use ng-show to show (or not) the loader ng-show="test" :

JSFiddle

// http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/

angular.module("formDemo", [])

.controller("LocationFormCtrl", function ($scope, $timeout) {
    $scope.searchButtonText = "Search";
$scope.test="false";
$scope.search = function() {
    $scope.test="true";
     $scope.searchButtonText = "Searching";
    $timeout(function(){
        $scope.test="false";
        $scope.searchButtonText = "Search";
    },1000)
    // Do your searching here
}
});

body {
    font-family:"HelveticNeue", sans-serif;
    font-size: 14px;
    padding: 20px;
}
h2 {
    color: #999;
    margin-top: 0;
}
.field {
    margin-bottom: 1em;
}
.click-to-edit {
    display: inline-block;
}
input {
    display: initial !important;
    width: auto !important;
    margin: 0 5px 0 0 !important;
}

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
  
<div ng-app="formDemo" ng-controller="LocationFormCtrl">
    <div>
    <button type="submit" class="btn btn-primary" ng-click="search()">
       <span ng-show="test" ><i class="glyphicon glyphicon-refresh spinning"></i></span>
        {{ searchButtonText }}
    </button>
</div>    
</div>