如何在插入大量dom元素时显示"工作"指示符

在插入大量DOM元素时显示"工作"指示符，可以使用以下方法：

使用CSS动画创建一个"工作"指示符。

可以使用CSS动画来创建一个"工作"指示符，例如一个旋转的动画。在HTML中添加一个元素，例如一个div，并将其样式设置为一个旋转动画。

<div class="loading-indicator"></div>

在CSS中定义一个旋转动画：

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

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

使用JavaScript在插入DOM元素时显示"工作"指示符。

可以使用JavaScript在插入DOM元素时显示"工作"指示符。在插入DOM元素之前，显示"工作"指示符，并在插入完成后隐藏它。

// 显示"工作"指示符
function showLoadingIndicator() {
  var indicator = document.createElement('div');
  indicator.className = 'loading-indicator';
  document.body.appendChild(indicator);
}

// 隐藏"工作"指示符
function hideLoadingIndicator() {
  var indicator = document.querySelector('.loading-indicator');
  if (indicator) {
    indicator.parentNode.removeChild(indicator);
  }
}

// 插入大量DOM元素
function insertManyElements() {
  showLoadingIndicator();

  // 插入大量DOM元素的代码

  hideLoadingIndicator();
}

这些方法可以帮助您在插入大量DOM元素时显示"工作"指示符，以提高用户体验并提醒用户正在进行操作。