CSS spinner without spinning text

December 28, 2021

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>

>Solution :

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>