CSS 微调器无旋转文本

Question

我在页面上有一个加载微调器，在单击按钮几秒钟后显示。 我试图在加载圈的中间添加一个加载文本，但它也在旋转。 如何阻止文本旋转？ 我认为跨度标签不受 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>