How To Add A Spinner While Loading The Content In Angularjs?

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 spin

Solution 1:

<divng-app="formDemo"ng-controller="LocationFormCtrl"><div><buttontype="submit"class="btn btn-primary"ng-click="search()"><spanng-show="searchButtonText == 'Searching'"><iclass="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"

<spanng-show="searchButtonText == 'Searching'"><iclass="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/

Solution 2:

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: 05px00!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);}
}

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

Solution 3:

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:

<buttonclass="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.

Solution 4:

Just add an ng-show to your spinner:

<spanng-show="loading"><iclass="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

Solution 5:

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:http://goo.gl/BUfGZ --> 
<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: 05px00!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);
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="formDemo"ng-controller="LocationFormCtrl"><div><buttontype="submit"class="btn btn-primary"ng-click="search()"><spanng-show="test"><iclass="glyphicon glyphicon-refresh spinning"></i></span>
      {{ searchButtonText }}
    </button></div></div>