CSS 不旋转文本的微调器

Question

我在页面上有一个加载微调器，它在单击按钮几秒钟后显示。我试图在加载圆的中间添加一个加载文本，但它也在旋转。如何停止文本旋转？我认为 span 标签不受 css 转换的影响。

function load() {
  document.getElementById("loader").style.display = "block";
  setTimeout(function() {
    document.getElementById("loader").style.display = "none";
  }, 4000);
}

.centered {
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #ffffffbb;
  border-radius: 50%;
  border-top: 16px solid #9c5eb8b6;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

<button type='button' onclick='load()'>Click</button>
<div class="centered">
  <div id="loader" style="display:none">
    <span class="loading-text">Loading...</span>
  </div>
</div>

Answer 1

不要在同一元素中同时添加微调器和文本，而是添加另一个。所以我们只能旋转那个。

我将其命名为 .spinner，在 loading-text 旁边：

function load() {
  document.getElementById("loader").style.display = "block";
  setTimeout(function(){
    document.getElementById("loader").style.display = "none"; }, 4000);
}

.centered {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px; 
}

.spinner {
  -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
     border: 16px solid #ffffffbb;
    border-radius: 50%;
    border-top: 16px solid #9c5eb8b6;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
}

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

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

  .loader, .loading-text {
     
    width: 90px;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 45px);
    text-align: center;
  }

<button type='button' onclick='load()'>Click</button>
<div class="centered">
  <div id="loader" style="display:none">  
    <div class="spinner"></div>
    <span class="loading-text">Loading...</span>
  </div>
</div>

Answer 2

或者您可以使用 pseudo-element 如：

function load() {
  document.getElementById("loader").style.display = "block";
}

.centered {
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
}

#loader {  
 position: absolute;
}
#loader:before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;  
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #ffffffbb;
  border-radius: 50%;
  border-top: 16px solid #9c5eb8b6;
 -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

<button type='button' onclick='load()'>Click</button>
<div class="centered">
  <div id="loader" style="display:none">
    <span class="loading-text">Loading...</span>
  </div>
</div>

CSS 不旋转文本的微调器

CSS spinner without spinning text

html

javascript

css

animation