如何在选中复选框时在内容之前显示加载动画？(角度)

<input type="checkbox" id="checkbox">
<div id="content">这是内容</div>

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

#loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

const checkbox = document.getElementById('checkbox');
const content = document.getElementById('content');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    const loading = document.createElement('div');
    loading.id = 'loading';
    content.insertAdjacentElement('beforebegin', loading);
  } else {
    const loading = document.getElementById('loading');
    loading.remove();
  }
});