Center a text inside an spinning element

user_12827436 0
Viewed 79

I have a simple loader animation and I want to add a loading text inside the circle.

As I'm spinning the .slide-loader and my text is inside it I've tried to exclude the .loader-text but it still spins?! how can I fix the loader-text inside the circle?

Here is the code:

.slide-loader:not(.loader-text) { 
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 100px;
  height: 100px;
  -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); }
}
  <div class="slide-loader">
    <div class="loader-text">Loading...</div>
  </div>

css html
6 Answers

try this code:

  .slide-loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 100px;
    height: 100px;
    -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);
    }
  }
<div class="slide-loader">
    <div class="spinner"></div>
    <div class="loader-text">Loading...</div>
  </div>

user_120891760

You can't..as such, if you rotate the parent you rotate the child. You need to rotate the text the other way at the same time.

Then center the text any way you wish, perhaps with flexbox....

.slide-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-text {
  animation: spin 2s linear infinite reverse;
}
<div class="slide-loader">
  <div class="loader-text">Loading...</div>
</div>

user_28020400

Hi I made this work around and works perfectly.

<div class="container">
   <div class="slide-loader"></div>
   <div class="loader-text">Loading...</div>
</div>

 

       .slide-loader{ 
      grid-row: 1/-1;
      grid-column: 1/-1;
      margin: auto;
      border: 6px solid #f3f3f3;
      border-radius: 50%;
      border-top: 6px solid #3498db;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite; 
      animation: spin 2s linear infinite;
    }
    .container{
      width: 200px;
      display: grid;
      grid-template-rows: 1fr 20px 1fr;
      grid-template-columns: auto 60px auto;
    }
    .loader-text{
      grid-row: 2;
      grid-column: 2;
    }
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
user_109229870

Use an absolutely positioned pseudo-element (::before) for the rotating area, and center the text with a flexbox:

.slide-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

.slide-loader::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  animation: spin 2s linear infinite;
  content: '';
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="slide-loader">Loading...</div>

user_51574540

The spinner and text can be siblings and you can center both relative to the parent:

.slide-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

.spinner {
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  box-sizing: border-box;
  position: absolute;
  /*Center spinner with these 4 lines*/
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

.loader-text {
  position: absolute;
  /*Center text with these 3 lines*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="slide-loader">
  <div class="spinner"></div>
  <div class="loader-text">Loading...</div>
</div>

user_45120050 

.slide-loader:not(.loader-text) { 
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; 
  animation: spin 2s linear infinite;


}
.container {
  display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div>
<div class="container">
  <div class="loader-text">Loading...</div>
  <div class="slide-loader">
  </div>
</div>
</div>

user_121252690
Related