turn off css spinner if toggle switch is flicked off in javascript-CodePudding

Hi I have a toggle switch and spinner on my page. I want for the spinner to stop spinning or disappear when the toggle switch is flicked off. I believe I need some kind of javascript for this but a I am a newbie. Please assist in writing javascript for this on how to execute the spinner based on the .switch value.

.html page

 @keyframes spinner {
 0% {
 transform: translate3d(-50%, -50%, 0) rotate(0deg);
 }
  }
 100% {
 transform: translate3d(-50%, -50%, 0) rotate(360deg);
 }
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 28px;
}
.spin::before {
 animation: 1.5s linear infinite spinner;  
 animation-play-state: inherit;   
 border: solid 5px #cfd0d1;  
 border-bottom-color: #1c87c9;   
 border-radius: 50%;   content: "";  
 height: 20px;   width: 20px;   
 position: absolute;   
 top: 26%;   left:
 35%;   
 transform: translate3d(-50%, -50%, 0);   
 will-change:
 transform; }

.switch {   position: relative;   display: inline-block;   width:
 55px;   height: 28px; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked   .slider {
  background-color: #2196F3;
}

input:focus   .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<span ></span>
<div ></div>

CodePudding user response：

Using JavaScript, you can remove an element like this:

const el = document.querySelector("div.spin"); // your css query here
el.parentElement.removeChild(el);

I find hiding it is sometimes better (in case you need to reveal the loading again later):

const el = document.querySelector("div.spin"); // your css query here
el.style.display = "non"; // hide using CSS display

You'd want to put this code on the onclick handler for the input (which I don't believe you have in your code). If it is a button, you could do it like so:

<button onclick="const el = document.querySelector('div.spin');el.parentElement.removeChild(el);">Click to remove element</button>

There are many ways to embed JavaScript in your HTML websites; for more info, I'd recommend reading the MDN Docs.

CodePudding user response：

It can be good to separate HTML and JavaScript. Instead of having, in your HTML, <button onclick="some javascript code">, You could have <button id="my-toggle-btn">.

Then your JavaScript code could go inside an HTML script element on the same page as your HTML like this:

<script>
  const myToggleBtn = document.querySelector('#my-toggle-btn');
  myToggleBtn.addEventListener('click', function(){
    // some more javascript code
  });
</script>

The other way is to put that javascript code in a file for example main.js. Then you could include that file's contents by having a script element in the head element of your HTML:

<head>
  <script src="./main.js">
</head>

Most people use a mix of all these approaches depending on the situation. It is important to know about all of them.