title: adding a progress indicator inside a button
body: <p>I have the following button:</p>
  
  <p><a href="http://jsfiddle.net/TU6vQ/" rel="nofollow">http://jsfiddle.net/TU6vQ/</a></p>
  
  <p>and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so?
  The spinner is <a href="http://www.gifstache.com/images/ajax_loader.gif" rel="nofollow">here</a>. </p>
  
  <p>Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click. </p>
  
  <p>This is the simple button I have:</p>
  
  <pre><code> &lt;button id="inviteYourFriends" class="arvo-bold button blue" &gt;
              Invite your friends
          &lt;/button&gt;
  </code></pre>