CSS spinner without spinning text

Question

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.

 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

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 :

 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

Or you can use pseudo-element like:

 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>