Como exibir algo quando a filtragem é lenta usando AngularJS

Question

Mar 11, 2014, 08:33 PM

Como exibir algo quando a filtragem é lenta usando AngularJS

Em angular, tenho uma tabela e uma caixa de pesquisa onde o usuário pode digitar e angular pesquisará entre os dados e exibirá uma tabela. O problema é que tenho dados suficientes para que a filtragem possa ficar mais lenta. Nesse caso, gostaria de exibir um botão giratório:

Amostra semelhante ao meu html:

<body ng-controller="MainCtrl">

Search: <input ng-model="searchText">
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th><th>Address</th><th>City</th><th>Zip</th><th>Country</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.address}}</td>
    <td>{{friend.city}}</td>
    <td>{{friend.zip}}</td>
    <td>{{friend.country}}</td>
  </tr>
</table>
<div class='myspinner' > <!-- display only if filtering is occurring -->

A questão é: como posso exibir um botão giratório toda vez que a filtragem está ocorrendo?

CSS para spinner div:

.myspinner {
       position: absolute;
       left: 45%;
       top: 45%;
       height:50px;
       width:50px;
       margin:0px auto;
       position: absolute;
       -webkit-animation: rotation .6s infinite linear;
       -moz-animation: rotation .6s infinite linear;
       -o-animation: rotation .6s infinite linear;
       animation: rotation .6s infinite linear;
       border-left:6px solid rgba(0,170,240,.25);
       border-left: 6px solid rgba(0,170,240,.25);
       border-right: 6px solid rgba(0,170,240,.25);
       border-bottom: 6px solid rgba(0,170,240,.25);
       border-top: 6px solid rgba(0,170,240,.6);
       border-radius:100%;
    }

link para plunkr:http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview