CSS-Animation seltsam Springen Punkte

Question

Ich habe die folgende CSS-Klasse für meine Loader:

.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; 
} 

Und ich benutze es wie folgt aus:

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

Wie Sie here sehen können, werden die Punkte bewegt sich die ganzes Etikett nach links. Wie repariere ich das?

Answer 1

Sie legen die Pseudo position: absolute und es nach rechts bewegen (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; 
    }