title: Displaying spinner onclick
body: <p>I built a Spinner and animated it with CSS, and now I'm trying to hide the spinner and display it when the button has been clicked. So far,I  have written this code and it doesn't show up when I click the submit <strong><code>&lt;button&gt;</code></strong></p>
  
  <p>I hid the spinner with display:none and tried to use JavaScript to change the <strong><code>&lt;div&gt;</code></strong> to <strong><code>display:block</code></strong>, but it doesn't work.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
  margin: 0;
  padding: 0;
  }
  
  .loader {
     display: none;
     top: 50%;
     left: 50%;
     position: absolute;
     transform: translate(-50%, -50%);
  }
  
  .loading {
     border: 2px solid #ccc;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border-top-color: #1ecd97;
     border-left-color:  #1ecd97;
     animation: spin 1s infinite ease-in;
  }
  
  @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code> function spinner() {
   document.getElementsByClassName("loader").style.display = "block";
   }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;button type="submit" class="sbtn btn btn-secondary btn-c" 
  onclick="spinner()" &gt;Log in&lt;/button&gt;
  </code></pre>
  
  <p>I'm new with <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" rel="nofollow noreferrer">Javascript</a></strong> so I figured I'd get some pointers here.</p>