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 to "Searching" and spinner will be shown (Here button will be disabled). After loading the content (Promise resolved) buttonLabel will be reverted back to "Search" (button will be enable here).

I have tried the below code, but it is always showing the spinner.

HTML :

<button class="btn btn-xs btn btn-blue" ng-click="show()">
  <span><i class="glyphicon glyphicon-off"></i></span> {{buttonLabel}}
</button>

Script :

$scope.buttonLabel = "Search";
$scope.show = function() {
  $scope.buttonLabel = "Searching";
  $scope.test = TestService.getList( $cookieStore.get('url'),
    $rootScope.resourceName+"/students" );
    $scope.test.then( function( data ) {
      if( data.list ) {
        $scope.testData = data.list;
        $scope.buttonLabel = "Search";
      }
    }
  }

Updated Fiddle : http://jsfiddle.net/xc6nx235/18/

Jagdeep Singh · Accepted Answer · 2015-07-31 09:14:56Z

14

<div ng-app="formDemo" ng-controller="LocationFormCtrl">
<div>
    <button type="submit" class="btn btn-primary" ng-click="search()"> 
        <span ng-show="searchButtonText == 'Searching'"><i class="glyphicon glyphicon-refresh spinning"></i></span>
        {{ searchButtonText }}
    </button>
</div>

All you need to do is use ng-show or ng-hide directives.

ng-show="expression"

<span ng-show="searchButtonText == 'Searching'">
    <i class="glyphicon glyphicon-refresh spinning"></i>
</span>

this span will only be visible when searchButtonText will be equal to a string 'Searching'.

You should learn more about angular's directives. They'll be useful in future.

Good luck.

Demo http://jsfiddle.net/xc6nx235/16/

answered Jul 31, 2015 at 9:14

Jagdeep Singh

8856 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jagdeep Singh Over a year ago

@N123 You can use ng-disabled="expression" as well to disable the button.

Nagarjuna Reddy Over a year ago

@ Jagdeep Singh: Updated fiddle link in the question.

mayank bisht Over a year ago

@JagdeepSingh Hi, after 2 seconds, button text will change, but is there any way to keep it showing Searching till we get the response back from server.?

Thom-x · Accepted Answer · 2015-07-31 09:05:20Z

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>

Hi, after 1 second, button text will change, but is there any way to keep it showing Searching till we get the response back from server.?

Johan van der Vleuten · Accepted Answer · 2015-12-16 12:50:24Z

4

You can also use this simple directive:

https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html

To use it, just add the button-spinner='loading' attribute:

<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button>

It will append a spinner to it, inside the button, when your loading variable in the scope is true.

answered Dec 16, 2015 at 12:50

Johan van der Vleuten

4234 silver badges24 bronze badges

Comments

Razvan B. · Accepted Answer · 2015-07-31 09:03:01Z

1

Just add an ng-show to your spinner:

<span ng-show="loading"><i class="glyphicon glyphicon-refresh spinning"></i></span>

and controller:

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

Then, when you get your response, set $scope.loading to false again

Demo

answered Jul 31, 2015 at 9:03

Razvan B.

6,7812 gold badges22 silver badges32 bronze badges

Comments

Ajay Narain Mathur · Accepted Answer · 2015-07-31 09:04:04Z

Use ng-show directive like this ng-show="test" on spinner span:

Snippet:

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

angular.module("formDemo", [])

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

</style> <!-- Ugly Hack due to jsFiddle issue:https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/132 --> 
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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> <style> 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);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.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>

Lucian · Accepted Answer · 2015-07-31 09:06:27Z

0

You should use ng-class to add/remove the class .spinning based on $scope.test. I have updated your fiddle here: http://jsfiddle.net/xc6nx235/15/

answered Jul 31, 2015 at 9:06

Lucian

6443 silver badges13 bronze badges

Comments

rouble · Accepted Answer · 2017-09-28 13:35:04Z

For Angular2/4, you can use [hidden] to control the visibility of the spinner. Here is a Plunker.

<button class="btn btn-primary" (click)="onClickDoSomething()">
  <span [hidden]="!spin">
        <i class="glyphicon glyphicon-refresh spinning"></i>
    </span> Do something
</button>

Where spinning is defined in as:

<style>
  .spinning {
    animation: spin 1s infinite linear;
  }

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

And your component simply sets the boolean to control the visibility of the spinner. In this example, we simply spin for 10 seconds.

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'do-something',
  templateUrl: 'src/dosomething.html'
})
export class DoSomething {
   private spin: boolean = false;

   onClickDoSomething() {
     this.spin = true;
     this.sub = Observable.interval(10000).subscribe(x => {
         this.sub.unsubscribe();
         this.spin = false;
     }); 
   }
}

Collectives™ on Stack Overflow

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

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related