title: AngularJS - Loading icon whilst waiting for data/data calculation
body: <p>I have a simple Angular http.get:</p>
  
  <pre><code>app.factory('countriesService', function($http) {
  return {
      getCountryData: function(done) {
          $http.get('/resources/json/countries.json')
          .success(function(data) { done(data);})
          .error(function(error) {
              alert('An error occured');
          });
      }
  }
  });
  </code></pre>
  
  <p>Example .JSON:</p>
  
  <pre><code>{
  "NoCities": 66,
  "Balance": 2103,
  "Population":  63705000,
  "CityInfo": [
      {
          "CityName": "London",
          "CityPopulation": "7825200",
          "Facts": {
              "SubFact1": "xzy",
              "SubFact2": "xzy",
              "SubFact3": "xzy",
              "SubFact4": "xzy",
              "SubFact5": "xzy"
          },
      },
      {
          "CityName": "Manchester",
          "CityPopulation": "2584241",
          "Facts": {
              "SubFact1": "abc",
              "SubFact2": "abc",
              "SubFact3": "abc",
              "SubFact4": "abc"
          },
      }
  
  ],
  "SubmitInfo": null,
  "FormAction": null,
  "FormController": null,
  }
  </code></pre>
  
  <p>I've noticed when my page is performing a .length, sometimes it can take a while for the data to load, for example:</p>
  
  <pre><code>&lt;div&gt;
      &lt;a&gt;Countries&lt;/a&gt; : {{Countries.length}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Does Angular have some form of waiting/loading icon that i could show whilst the data in the DIV is being populated?</p>
  
  <p>Ideally something lightweight and that doesnt require a library to be loaded (my application is using jQuery too)</p>
  
  <p>Thanks</p>