Анимация загрузки в AJAX в PHP

Давайте сделаем так, чтобы при ожидании выполнения AJAX запроса в блоке с результатом выводился анимированный спиннер. Для этого напишем следующий CSS код:

html<div id="result" class="loading"></div>

css.loading {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

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

Результат:

Как можно увидеть из приведенного кода, спиннер будет включаться при наличии класса loading у нашего блока. Давайте будем включать спиннер перед AJAX запросом и отключать после выполнения запроса:

javascriptbutton.addEventListener('click', async function() {
  result.classList.add('loading');
  
  let response = await fetch('ajax.php');
  let text = await response.text();
  
  result.classList.remove('loading');
  result.innerHTML = text;
});