如何保持裝載器的文本不變？

Question

我有一個圈子加載器和一個文本里面。我怎樣才能保持這個文本內的圓靜態？因爲它隨着圓圈而移動。我簡單的代碼是：

<div class="loader"> 
    <div class="stop"> 
    STOP 
    </div> 
</div> 

而CSS：

.loader { 
    border-radius: 50%; 
    border-top: 8px solid red; 
    border-bottom: 8px solid red; 
    border-right:8px solid red; 
    border-left:8px solid white; 
    width: 120px; 
    height: 120px; 
    animation: spin 4s linear infinite; 
    margin:220px; 
} 

.stop{ 
    position: absolute; 
    top: 45%; 
    left: 40px; 
    width: 100%; 
    font-size:20px; 
} 

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

任何想法的傢伙!! ??

Answer 1

正如@ this.Believer所說，整個div是旋轉的，而不是裝載機。您將需要爲旋轉一圈創建一個單獨的元素，然後定位.stop元素：

HTML

<div class="loaderFrame"> 
    <div class="stop">STOP</div> 
    <div class="loader"></div> 
</div> 

CSS

.loaderFrame { 
    position: relative; 
    width: 120px; 
    height: 120px; 
    margin:220px; 
} 

.loader { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    border-top: 8px solid red; 
    border-bottom: 8px solid red; 
    border-right:8px solid red; 
    border-left:8px solid white; 
    animation: spin 4s linear infinite; 
} 

.stop{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    font-size:20px; 
    transform: translate(-50%, -50%); 
    margin: 0; 
} 

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

見jsFiddle

Answer 2

只是增加了一個塊元素來保存兩個div，並且只使用圓圈動畫加載器div，所以文本div保持靜態

.loader-block { 
 
    position: relative; 
 
    margin:50px; 
 
    width: 120px; 
 
    height: 120px; 
 
} 
 
.loader { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    border-top: 8px solid red; 
 
    border-bottom: 8px solid red; 
 
    border-right:8px solid red; 
 
    border-left:8px solid white; 
 
    animation: spin 4s linear infinite; 
 
    box-sizing: border-box; 
 
} 
 

 
.stop{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size:20px; 
 
} 
 

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

<div class="loader-block"> 
 
    <div class="loader"></div> 
 
    <div class="stop">STOP</div> 
 
</div>

Answer 3

你可以試試這個

<div class="loader"> 
    </div> 
    <!--removed below div from loader --> 
    <div class="stop"> 
     STOP 
    </div> 

和CSS

.stop{ 
    position: absolute; 
    top: 45%; 
    left: 32%; //set this according to ur requirement 
    width: 100%; 
    font-size:20px; 
} 

Answer 4

的問題是，DIV CLASS = 「止」 是div類中= 「裝載機」 ，所以得到它的旋轉（作爲一個孩子div得到它的定位從它的父母。）

解決方法是讓stop和loader兄弟代替。

你可以嘗試這樣的事情（你需要反覆折騰寬度的/身高等，但你的想法）

.loader { 
    border-radius: 50%; 
    border-top: 8px solid red; 
    border-bottom: 8px solid red; 
    border-right:8px solid red; 
    border-left:8px solid white; 
    width: 120px; 
    height: 120px; 
    animation: spin 4s linear infinite; 
    margin:220px auto; 
} 

.stop{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right:0; 
    bottom:0; 
    font-size:20px; 
    text-align:center; 
    margin:280px auto; 
} 

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

<div class="wrapper"> 

    <div class="loader"> 
    </div> 

    <div class="stop"> 
     STOP 
    </div> 
</div> 

小提琴這裏： https://jsfiddle.net/wnpb8hwp/1/#&togetherjs=CAar1kqum2

Answer 5

.loader { 
 
      animation: 4s linear 0s normal none infinite running spin; 
 
      border-color: red red red white; 
 
      border-radius: 50%; 
 
      border-style: solid; 
 
      border-width: 8px; 
 
      height: 120px; 
 
      margin: auto; 
 
      width: 120px; 
 
     } 
 

 
     .stop { 
 
      font-size: 20px; 
 
      left: 45%; 
 
      position: absolute; 
 
      top: 55px; 
 
      width: 100px; 
 
     } 
 

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

 
      100% { 
 
       transform: rotate(360deg); 
 
      } 
 
     } 
 

 
     .loaderblock 
 
     { 
 
      position:relative 
 
     }

<div class="loaderblock"> 
 
    <div class="loader"> 
 
    </div> 
 
    <div class="stop"> 
 
     STOP 
 
    </div> 
 
</div>