[英]CSS spinner without spinning text
I have a loading spinner on a page that shows after a button click for a few seconds.我在页面上有一个加载微调器,在单击按钮几秒钟后显示。 I tried to add a loading text in the middle of the loading circle but its also spinning.
我试图在加载圈的中间添加一个加载文本,但它也在旋转。 How do I stop the text from spinning?
如何阻止文本旋转? I thought that a span tag is not affected by css transform.
我认为跨度标签不受 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>
Instead of having both the spinner and the text in the same element, add another.不要将微调器和文本都放在同一个元素中,而是添加另一个。 So we can only spin that one.
所以我们只能旋转那个。
I've named it .spinner
, next to loading-text
:我将其命名为
.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>
Or you can use pseudo-element
like:或者您可以使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.