如何正确地将CSS加载文本添加到css加载动画中？我只看到占位符文本

<div class="loader">
  <span class="placeholder-text">Loading...</span>
</div>

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

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.placeholder-text {
  font-size: 16px;
  color: #666;
}

.loader::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #666;
  border-top-color: transparent;
  animation: loader 1s linear infinite;
}

window.addEventListener('DOMContentLoaded', function() {
  // 获取占位符文本所在的DOM元素
  var placeholderText = document.querySelector('.placeholder-text');

  // 模拟异步加载CSS文件
  setTimeout(function() {
    // 更新文本内容
    placeholderText.textContent = 'CSS Loaded!';
  }, 2000);
});