如何在点击执行函数前显示LGButton的加载微调器？

<button id="lg-button" class="lg-button">执行函数</button>

.lg-button {
  position: relative;
}

.lg-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

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

document.getElementById("lg-button").addEventListener("click", function() {
  showLoader();
  executeFunction();
});

function showLoader() {
  var button = document.getElementById("lg-button");
  button.classList.add("loading");
  button.disabled = true;
}

function executeFunction() {
  // 执行你的函数代码
  // 在函数执行完成后，记得隐藏加载微调器
  hideLoader();
}

function hideLoader() {
  var button = document.getElementById("lg-button");
  button.classList.remove("loading");
  button.disabled = false;
}