不旋轉文本的CSS微調器

我在頁面上有一個加載微調器，在單擊按鈕幾秒鐘后顯示。我試圖在加載圓圈的中間添加一個加載文本，但它也在旋轉。如何阻止文本旋轉？我認為 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>

uj5u.com熱心網友回復：

不要將微調器和文本都放在同一個元素中，而是添加另一個。所以我們只能旋轉那個。

我把它命名為.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>

uj5u.com熱心網友回復：

或者你可以使用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>

標籤：javascript html css 动画片

上一篇：如何將兩個Div相互對齊？

下一篇：使用Bootstrap表單提交表單