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 <button>

I hid the spinner with display:none and tried to use JavaScript to change the <div> to display:block, but it doesn't work.

CSS:

* {
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);
   }
}

JavaScript:

 function spinner() {
 document.getElementsByClassName("loader").style.display = "block";
 }

HTML:

<button type="submit" class="sbtn btn btn-secondary btn-c" 
onclick="spinner()" >Log in</button>

I'm new with Javascript so I figured I'd get some pointers here.

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 <button>

I hid the spinner with display:none and tried to use JavaScript to change the <div> to display:block, but it doesn't work.

CSS:

* {
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);
   }
}

JavaScript:

 function spinner() {
 document.getElementsByClassName("loader").style.display = "block";
 }

HTML:

<button type="submit" class="sbtn btn btn-secondary btn-c" 
onclick="spinner()" >Log in</button>

I'm new with Javascript so I figured I'd get some pointers here.

• javascript
• bootstrap-4

• I don't see the loader class on the spinner – Carol Skelly Commented Oct 9, 2019 at 19:51
• How do you mean Zim? – slimderek Commented Oct 9, 2019 at 19:53
• Do you know what document.getElementsByClassName("loader").style.display = "block"; does? It's looking for an element with class="loader" – Carol Skelly Commented Oct 9, 2019 at 20:02

5 Answers 5

If you want to add a style to your spinner you have to get the first element returned by the function getElementsByClassName.

getElementsByClassName returns a list with the elements with that specific class.

getElementById returns one element, with the given Id.

I sugest in your case, to give an ID to the loader and do getElementById. But if you want to use getElementsByClassName you can do the following:

document.getElementsByClassName("loader")[0].style.display = "block";

Here's a working spinet:

* {
  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);
  }
}

<button type="submit" class="sbtn btn btn-secondary btn-c" onclick="spinner()">Log in</button>
<div class="loader">
  <div class="loading">
  </div>
</div>


<script type="text/javascript">
    function spinner() {
        document.getElementsByClassName("loader")[0].style.display = "block";
    }
</script>    

You didn't let us know where do you want to add the spinner so I created <div> which will contain the spinner's animation like so:

HTML:

<button type="submit" id="btn" class="sbtn btn btn-secondary btn-c">Log in</button>

<div class='spinner-displayer'></div>

CSS:

* {
  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);
  }
}

JavaScript:

function spinner() {
    const spinnerDisplayer = document.querySelector('.spinner-displayer');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
    spinnerDisplayer.classList.add('loading');
  })
}

spinner();

Check this working code sample.

I woud suggest you to not use inline event handlers on your HTML, it's a bad idea.

Try this approach https://codepen.io/jmalatia/pen/HkmaA

<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>



$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

</div>

Without your full html code, it's hard to interpret what the loader class is even there for.

<div id="spinner" class="loading">
</div>
<button type="submit" class="sbtn btn btn-secondary btn-c" 
onclick="spinner()" >Log in</button>


<style type="text/css">

    #spinner {
        display: none;
    }

    .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);
        }
    }
</style>

<script type="text/javascript">
    function spinner() {
        document.getElementById("spinner").style.display = "block";
    }
</script>

This approach works, I've added an ID of #spinner to your spinner image and have it display none. Then on button click it sets the display to block.

Turning off the spinner

Thanks for the tips, which allowed me to incorporate a spinner in my application.

One challenge is turning off the spinner after the action that the button's click event executes. In my use case, the button's action eventually redirected to another page; when the user moved back to the original page, the spinner was still visible.

I got around this in my application by doing the following. It seems to work consistently in my application.

1. A script that hides the spinner:

    <script type="text/javascript">
    function spinneroff() {
      document.getElementByID("spinner").hide();
    }
   

2. Invoking the script in the body's onpageload event. This will hide the spinner both when the page is refreshed and when another page redirects to the page.

   <body onpageload="spinneroff()">
   

3. Adding an event listener for the pageshow event. This forces a reload of a page in case of navigating back; the reload then triggers the onpageload event. (Thanks to the AI in Google for suggesting this, after I figured out what I wanted.)

   <script type="text/javascript">
      window.addEventListener('pageshow', function(event) {
    if (event.persisted || performance.navigation.type === 2) {
      location.reload();
    }});
   </script>