Отображение блесны на клике

Question

Я создал Spinner и анимировал его с помощью CSS, и теперь я пытаюсь скрыть Spinner и отобразить его при нажатии кнопки. До сих пор я написал этот код, и он не отображается, когда я нажимаю кнопку отправки <button>

Я спрятал счетчик с отображением: нет и попытался использовать JavaScript для изменения<div> до display:block, но это не работает.

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>

Я новичок с Javascript так что я подумал, что получу несколько указателей здесь.

Answer 1

Если вы хотите добавить стиль к вашему счетчику, вы должны получить первый элемент, возвращаемый функцией getElementsByClassName.

getElementsByClassName, возвращает список с элементами этого определенного класса.

getElementById возвращает один элемент с заданным идентификатором.

Я рекомендую в вашем случае дать идентификатор загрузчику и выполнить getElementById. Но если вы хотите использовать getElementsByClassName, вы можете сделать следующее:

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

Вот рабочий алгоритм:

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

Вы не сообщили нам, куда вы хотите добавить спиннер, поэтому я создал <div>, который будет содержать анимацию блесны, например:

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

Проверьте этот рабочий кодпример .

Я рекомендую вам не использовать встроенные обработчики событий на HTML , это плохая идея .

Answer 3

Попробуйте этот подход 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 4

Без вашего полного HTML-кода трудно интерпретировать, для чего вообще нужен класс загрузчика.

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

Этот подход работает, я добавил идентификатор #spinner к вашему изображению счетчика и получилэто не отображать ни одного. Затем по нажатию кнопки он устанавливает блокировку дисплея.