如何在中心和内部有加载器的盒子中实现活动指示

<div class="box">
  <div class="loader"></div>
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 盒子样式 */
}

.loader {
  /* 加载器样式 */
}

.content {
  /* 内容样式 */
}

// 显示加载器
function showLoader() {
  document.querySelector('.loader').style.display = 'block';
}

// 隐藏加载器并显示内容
function hideLoader() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.content').style.display = 'block';
}

// 模拟加载过程
showLoader();
setTimeout(hideLoader, 3000); // 假设加载过程需要3秒