如何在按钮小部件中显示进度指示器(如图所示)

<button id="myButton">点击我</button>

#myButton {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

document.getElementById("myButton").addEventListener("click", function() {
  // 在这里执行按钮点击后的操作
});

document.getElementById("myButton").addEventListener("click", function() {
  // 在按钮点击后添加进度指示器
  var spinner = document.createElement("div");
  spinner.className = "spinner";
  document.getElementById("myButton").appendChild(spinner);
  
  // 执行耗时操作，例如发送网络请求或执行复杂计算
  // 完成操作后，移除进度指示器
  setTimeout(function() {
    document.getElementById("myButton").removeChild(spinner);
  }, 3000);
});

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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