CODEWITHSUNDEEP
javascriptangularjs
Mayur Randive
Mayur Randive

Reputation: 643

How to add/activate loading spinner near tab name(title) when I make an api call in angular/Javascript

I am trying to figure out a way to show loading spinner near tab name as shown in the image below whenever I make a api call in angualrJS/javascript.

enter image description here

Normally whenever we refresh the page it is activated , but want to know if we could activate it using javascript or not ?

Upvotes: 0

Views: 631

Answers (1)

koder23
koder23

Reputation: 317

I have done something similar using bootstrap and font awesome icons

<ul class="nav nav-tabs">
  <li role="presentation" class="active">
     <a showtab="" href="#myTab" data-toggle="tab">
       <i class="fa fa-refresh fa-spinner" data-ng-if="isLoadingData"></i>
        My Tab 
      </a>
  </li>
  ...
</ul>

Above, showtab is an angular directive for tabs and isLoadingData is a flag that I said before making the API call in angular and unset it on a response from API as below:

$scope.isLoadingData = true;
myPromiseGetObj.then(function(data){            
    $scope.listOfClosedKits = data.data.data;
    $scope.isLoadingData = false;
    callback(data.data);
});

myPromisePostObj is my $http get object.

Please let me know if you are stuck somewhere :)

EDITED: To my knowledge, I dont think it could be done, instead you can use your own custom logic to show loading icons when you make API calls.

Upvotes: 1

Related Questions