title: Spinner in Angular.js
body: <p>I want to use a spinner which I can show during some of the rest api calls for a better UX. I have come across many existing github projects which does exactly similar things.</p>
  
  <p><a href="https://github.com/cgross/angular-busy" rel="nofollow">https://github.com/cgross/angular-busy</a><br>
        <a href="https://github.com/urish/angular-spinner" rel="nofollow">https://github.com/urish/angular-spinner</a></p>
  
  <p>But I'm not able to use any of the existing projects. I think before I start writing something of my own, I want to know if things which I'm looking for can be done using these projects or any other existing project. </p>
  
  <p><strong>Requirement:</strong></p>
  
  <ol>
  <li>During some of the rest api calls like uploading images, fetching some data, deleting images, etc, I want to show a spinner with background faded. Once I have the result, I can show the background again and remove the spinner. </li>
  <li>I want to use this spinner with start/stop from my controller not from my html.</li>
  <li>I don't want this spinner for all the xhr requests by default. </li>
  </ol>
  
  <p>I think angular-busy <a href="http://cgross.github.io/angular-busy/demo/" rel="nofollow">demo</a> does solves most of the above requirements except that it needs a promise param in html. Is there anyway by which I can control the start/stop dynamically from my controller rather than giving a promise.</p>
  
  <p>Angular-spinner <a href="https://github.com/urish/angular-spinner" rel="nofollow">demo</a> is good but it doesn't fade out background. Is there any way to fade out background ?</p>
  
  <p>Can anyone give me some pointers how exactly can I solve my problem ?</p>