CSS animasyon garip atlama noktalar

Question

benim Loader aşağıdaki CSS sınıfı var: Ve ben bunu böyle

.loading{ 
    color:black; 
    position:fixed; 
    width: 270px; 
    height:100px; 
    font-size:20px; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    transition: 1s ease-out; 
    opacity:1; 
} 



    .loading:after { 
    overflow: hidden; 
    display: inline-block; 
    vertical-align: bottom; 
    animation: ellipsis steps(4,end) 900ms infinite; 
    content: "\2026"; /* ascii code for the ellipsis character */ 
    width: 0px; 
    } 

    @keyframes ellipsis { 
    to { 
     width: 20px; 
    } 
    } 

    @-webkit-keyframes ellipsis { 
    to { 
     width: 20px; 
    } 
    } 


.centered{ 
    vertical-align:middle; 
    text-align:center; 
    align-items: center; 
    justify-content: center; 
} 

kullanın:

<div class="loading centered"> 
    Loading your results 
</div> 

sen here görebileceğiniz gibi, noktalar hareket ediyor tüm etiket sola. Bunu nasıl düzeltirim?

Answer 1

Sen position: absolute için sahte ayarlanır ve sağa (left: 100%)

Updated Plunker

.loading{ 
    color:black; 
    position:fixed; 
    width: 180px;    /* changed */ 
    height:100px; 
    font-size:20px; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    transition: 1s ease-out; 
    opacity:1; 
}  
    .loading:after { 
    overflow: hidden; 
    display: inline-block; 
    position: absolute;  /* added */ 
    left: 100%;    /* added */ 
    vertical-align: bottom; 
    animation: ellipsis steps(4,end) 900ms infinite; 
    content: "\2026"; /* ascii code for the ellipsis character */ 
    width: 0px; 
    } 

taşıyın