title: How can I add UI spinner on Ajax call?
body: <p>I want to show loading spinner on Ajax call. I tried <code>spin.js</code> library but it didn’t work. Here is my JavaScript function, which using Ajax call.</p>
  
  <pre><code>function sendRequest() {
      $.ajax({
              url: '/spinner',
              type: 'get',
              contentType: "application/json",
              success: function (resp) {
                  $('#spinner').append(resp.data);
                  console.log(resp.data);
              },
              error: function (){
                  console.log("Oops!");
              }
          }
      );
  }
  </code></pre>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link type="text/css" rel="stylesheet" href="../resources/css/style.css"/&gt;
      &lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"&gt;
      &lt;script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="../resources/js/send.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()"&gt;Press me!&lt;/button&gt;
      &lt;div id="spinner"&gt;Greeting!&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>-CSS-</p>
  
  <pre><code>#spinner {
      text-align: center;
      font-size: 100px;
      color: #FFFFFF;
      margin: 25px 350px 350px 350px;
      background: #ad9ea4;
      position: relative;
      padding: 50px;
  }
  </code></pre>
  
  <p>On server side I have a little delay (5 seconds). Actually I want to show spinner for this 5 secs. How can I add animation spinner into my page?</p>