3

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.

Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68
slimderek
  • 43
  • 1
  • 1
  • 5

4 Answers4

7

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>
Diogo Peres
  • 1,302
  • 1
  • 11
  • 20
  • 1
    this worked for me, i finally understand the difference between classes and IDs in Js Cool. – slimderek Oct 09 '19 at 20:19
  • @slimderek glad it helped. If this resolved your question please mark as accepted answer in the check mark so other know it's solved. Good luck with your project. – Diogo Peres Oct 09 '19 at 22:32
3

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.

Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68
1

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>
chans
  • 5,104
  • 16
  • 43
0

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.

SamNewton
  • 72
  • 5