title: How to display something when filtering is slow using AngularJS
body: <p>In angular I have a table and a search box where user can type and angular will search among the data and display a table. The problem is that I have enough data that filtering can get slowed down, in this case, I would like to display a spinner:</p>
  
  <p>Sample similar to my html:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
  
  Search: &lt;input ng-model="searchText"&gt;
  &lt;table id="searchTextResults"&gt;
    &lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Phone&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;th&gt;Zip&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt;
    &lt;tr ng-repeat="friend in friends | filter:searchText"&gt;
      &lt;td&gt;{{friend.name}}&lt;/td&gt;
      &lt;td&gt;{{friend.phone}}&lt;/td&gt;
      &lt;td&gt;{{friend.address}}&lt;/td&gt;
      &lt;td&gt;{{friend.city}}&lt;/td&gt;
      &lt;td&gt;{{friend.zip}}&lt;/td&gt;
      &lt;td&gt;{{friend.country}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class='myspinner' &gt; &lt;!-- display only if filtering is occurring --&gt;
  </code></pre>
  
  <p></p>
  
  <p>The question is, how can I display a spinner each time that filtering is occurring?</p>
  
  <p>CSS for spinner div:</p>
  
  <pre><code>.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%;
      }
  </code></pre>
  
  <p>link to plunkr: <a href="http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview">http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview</a></p>