title: How to show spinner while typing in input field
body: <p>I want to start spinner while typing. When I stop doing it, then it should match the username, if username exists, show tick icon otherwise show cross icon and also minimum letter should be 4 .</p>
  
  <p>I tried it with using two icons, tick &amp; cross. I kept the minimum letter condition as 4 and it worked fine, when I remove the characters those tick or cross should disappear, but it does not.</p>
  
  <p>How to add spinner and also how to avoid this problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log($("#id_username"));
  $("#id_username").keyup(function() {
  
  
    $("#lola").show();
    if (this.value.length &lt; 4) {
      return
    }
    var username = $(this).val();
    console.log(username);
    $.ajax({
      url: '/ajax/validate_username/',
      type: "POST",
      data: {
        'username': username,
        csrfmiddlewaretoken: '{{ csrf_token }}',
      },
      dataType: 'json',
      success: function(data) {
        console.log(data);
        if (data.is_taken) {
          $("#lola").html('&lt;i class="glyphicon glyphicon-remove" aria-hidden="true"&gt;&lt;/i&gt;');
          $("#lola").css("background-color", "red");
  
        } else {
          $("#lola").html('&lt;i class="glyphicon glyphicon-ok" aria-hidden="true"&gt;&lt;/i&gt;');
        }
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-group"&gt;
  
    &lt;input class="form-control" id="id_username" name="username" placeholder="Username" type="text" required /&gt;
  
    &lt;div class="input-group-addon" id="lola" style="display:none"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>