CSS spinner without spinning text-CodePudding

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 >
  <div id="loader" style="display:none">
    <span >Loading...</span>
  </div>
</div>

CodePudding user response：

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 >
  <div id="loader" style="display:none">  
    <div ></div>
    <span >Loading...</span>
  </div>
</div>

CodePudding user response：

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 >
  <div id="loader" style="display:none">
    <span >Loading...</span>
  </div>
</div>