title: Controlling the size of a spinning loading icon
body: <p>Thanks again for anyone who can help me with what should be a seemingly easy problem! I just can't figure it out for the life of me. I am creating a sign up page that includes two  areas. I want these input areas to be inline with an icon that comes up while it is checking the database. </p>
  
  <p>I have everything setup and I think my html is proper. I have created a row that contains both the input box and the whirly loader I got from the internet. The only problem is when I run it the whirly loader is way too big and is not totally in line with the input box. </p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-10"&gt;
      &lt;input type="text" class="form-control" id="usernameOrEmail" placeholder="Shattr Username or Email"&gt;
          &lt;label id = "usernameLabel"&gt;&lt;/label&gt;
      &lt;/div&gt;
  
          &lt;div class="col-xs-2"&gt;  
  
  
              &lt;div class="whirly-loader" id="usernameSpinner" style="display: none;"&gt;Loading...&lt;/div&gt; 
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then go in and point to the "whirly-loader" class, but nothing changes no matter what I set my width and height to. This may be too weird a question but if anyone has any suggestions that would be awesome. Here is my css:</p>
  
  <pre><code> .whirly-loader{
  
   height:10%;
   width:10%;
  
    }
  </code></pre>