Showing loading spinner when clicked

Question

Showing loading spinner when clicked

I created a spinning animation in CSS, but now I want to hide it and only display it when a button is clicked. I've tried to achieve this using the following code, but the spinner doesn't appear when I click the submit button.

To hide the spinner initially, I used the CSS property display:none. Then, I attempted to use JavaScript to change the display property to block when the button is clicked, but it's not working as expected.

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 still learning JavaScript, so any advice or guidance would be greatly appreciated.

javascript bootstrap-4

Answer 1

Answer №1

To customize your spinner, you need to target the first element that matches the specified class using the getElementsByClassName function.

The getElementsByClassName method returns an array-like object containing all elements that have the specified class name.

On the other hand, the getElementById function retrieves an element with a specified id.

In your case, I recommend assigning an ID to the loader and then using getElementById. However, if you prefer to use getElementsByClassName, you can achieve the same by accessing the first element in the array like so:

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

Here is a sample snippet demonstrating how to style a spinner:

* {
  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>

Answer 2

To customize your spinner, you need to target the first element that matches the specified class using the getElementsByClassName function.

The getElementsByClassName method returns an array-like object containing all elements that have the specified class name.

On the other hand, the getElementById function retrieves an element with a specified id.

In your case, I recommend assigning an ID to the loader and then using getElementById. However, if you prefer to use getElementsByClassName, you can achieve the same by accessing the first element in the array like so:

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

Here is a sample snippet demonstrating how to style a spinner:

* {
  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>

Answer 3

Answer №2

Could you specify where you would like the spinner to be added? In the meantime, I have created a <div> element to contain the spinner's animation as shown below:

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();

Feel free to explore this live code demo.

As a best practice, I recommend avoiding the use of inline event handlers in your HTML code, as it is considered a less favorable approach.

Answer 4

Could you specify where you would like the spinner to be added? In the meantime, I have created a <div> element to contain the spinner's animation as shown below:

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();

Feel free to explore this live code demo.

As a best practice, I recommend avoiding the use of inline event handlers in your HTML code, as it is considered a less favorable approach.

Answer 5

Answer №3

If you're looking for a solution, check out this code snippet here: 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>

Answer 6

If you're looking for a solution, check out this code snippet here: 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>

Answer 7

Answer №4

It can be challenging to understand the purpose of the loader class without the complete html code.

<div id="loader" class="loading">
</div>
<button type="submit" class="btn btn-primary btn-custom" 
onclick="showLoader()" >Submit</button>


<style type="text/css">

    #loader {
        display: none;
    }

    .loading {
        border: 2px solid #333;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border-top-color: #ff0000;
        border-left-color: #ff0000;
        animation: spin 1s infinite ease-in-out;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

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

I have defined an ID of #loader for the spinner element and set its display to none initially. Upon clicking the button, the display is changed to block.

Answer 8

It can be challenging to understand the purpose of the loader class without the complete html code.

<div id="loader" class="loading">
</div>
<button type="submit" class="btn btn-primary btn-custom" 
onclick="showLoader()" >Submit</button>


<style type="text/css">

    #loader {
        display: none;
    }

    .loading {
        border: 2px solid #333;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border-top-color: #ff0000;
        border-left-color: #ff0000;
        animation: spin 1s infinite ease-in-out;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

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

I have defined an ID of #loader for the spinner element and set its display to none initially. Upon clicking the button, the display is changed to block.

Showing loading spinner when clicked

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to incorporate an icon into a React Bootstrap Dropdown menu

utilize JavaScript on every element that has a specific identifier

Troubleshooting a JavaScript Error on an ASP.NET MasterPage

I'm having trouble with the pull-right feature in Bootstrap -

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

Ways to store a filestream coming from Node.js into AngularJS

What is the purpose of using async/await in Node.js when it is inherently asynchronous, and in JavaScript as well, vice versa?

Unable to retrieve data from the JSON file after making a $http.post call

import a dynamically created STL file

Issues have been observed with the functionality of the Node.js EventEmitter when attempting to

The request to check the API at http://localhost/v5/api/checker returned a 404 error, indicating that

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

When clicking on HTML input fields, they do not receive focus

What is the best way to trigger a 'Save As' dialog box on a browser when a button is activated within an Angular application, guaranteeing cross-browser compatibility?

Ways to showcase HTML content in angular when receiving entities

What is the process for converting the color names from Vuetify's material design into hexadecimal values within a Vue component?

"Searching for existing data in MongoDB upon click event from the client side: A step-by-step guide

Utilizing Bootstrap to display selected portions of the list content

What could be causing the Fontawsome icon to malfunction within a Bootstrap table item?

Struggling to get Angular to properly sanitize inputs using ng-bind-html