title: How to add a loading animation to button?
body: <p>I am very new to JavaScript, I need a help in adding a loading animation on the check button, so when user clicks on the check button the loading animation will delay for a while before the submit button slides down.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;p&gt;Click the "Check" button to unhide Submit Button&lt;/p&gt;
  
          &lt;div id="myDIV"&gt;
              CLICK CHECK BUTTON.
              &lt;button onclick="myFunction()"&gt;Check&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div id="mynewDIV"&gt;
              SUBMIT BUTTON.
              &lt;button&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              var x = document.getElementById('mynewDIV');
              x.style.display = 'none';
  
              function myFunction() {
                  var y = document.getElementById('myDIV');
                  $("#myDIV").slideUp(1000);
                  y.style.display = 'none';
  
                  var y = document.getElementById('mynewDIV');
                  $("#mynewDIV").slideDown(1000);
                  y.style.display = 'block';
  
              }
          &lt;/script&gt;
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>