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

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

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

.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 запросом и отключать после выполнения запроса:

button.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;
});

Реализуйте анимированный спиннер на вашей странице.