如何在JS中创建在按下按钮时显示的微调器动画？

<button id="toggleButton">显示微调器</button>
<div id="animationContainer"></div>

const toggleButton = document.getElementById('toggleButton');
const animationContainer = document.getElementById('animationContainer');

toggleButton.addEventListener('click', showSpinnerAnimation);

function showSpinnerAnimation() {
  // 创建微调器动画元素
  const spinner = document.createElement('div');
  spinner.classList.add('spinner');

  // 将微调器动画元素添加到容器中
  animationContainer.appendChild(spinner);

  // 添加动画效果
  setTimeout(() => {
    spinner.classList.add('spin');
  }, 10);

  // 模拟一段时间后停止动画
  setTimeout(() => {
    spinner.classList.remove('spin');
    animationContainer.removeChild(spinner);
  }, 3000);
}

.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}