js 點擊按鈕彈出查詢中...三秒後顯示查詢結果

點擊按鈕後，彈出個框，顯示查詢支付狀況中...，三秒後，提示爲未查詢到支付賬單，請支付，主要的邏輯是這樣的，至於中間可以加一些後端請求的代碼進去，這裏就省略了。

html代碼爲：

<button data-v-b863db80="" type="button" class="el-button btn-info el-button--button" style="margin-top: 2%;" onClick="">
<span>支付成功請點擊.... </span>
</button>

js代碼：

function showPaymentStatus() {
  var modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.width = '300px';
  modal.style.height = '100px';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.backgroundColor = 'white';
  modal.style.borderRadius = '5px';
  modal.style.display = 'flex';
  modal.style.justifyContent = 'center';
  modal.style.alignItems = 'center';
  modal.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)';

  var message = document.createElement('p');
  message.innerText = '查詢支付狀況中';
  message.style.color = '#333';
  
  var dotWrapper = document.createElement('div');
  dotWrapper.style.display = 'flex';
  dotWrapper.style.marginTop = '-9px';
  dotWrapper.style.marginLeft = '10px';

  for (var i = 0; i < 3; i++) {
    var dot = document.createElement('div');
    dot.style.backgroundColor = '#ccc';
    dot.style.width = '10px';
    dot.style.height = '10px';
    dot.style.borderRadius = '50%';
    dot.style.marginRight = '5px';
    dot.style.animation = 'dot-loading 0.6s ' + i * 0.2 + 's infinite';
    dot.style.animationTimingFunction = 'linear';
    dotWrapper.appendChild(dot);
  }

  modal.appendChild(message);
  modal.appendChild(dotWrapper);
  document.body.appendChild(modal);

  // 隨機2到5秒後顯示未查詢到支付賬單
  var delay = Math.floor(Math.random() * 4) + 2;
  setTimeout(function() {
    message.innerText = '未查詢到支付賬單，請支付';
    dotWrapper.style.display = 'none';
    setTimeout(function() {
      modal.remove();
    }, 3000);
  }, delay * 1000);
}

css動畫加載代碼：

@keyframes dot-loading {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.7); /* 縮小70% */
    }
    100% {
      transform: scale(1);
    }
  }