CSSアニメーション奇妙なジャンピングドット

Question

私はローダーのため、以下のCSSクラスがあります。

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

をそして、私はそのようにそれを使用します。

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

あなたがhereを見ることができるように、ドットが動いています全体のラベルは左に。どうすれば修正できますか？

Answer 1

あなたはposition: absoluteに擬似を設定し、右（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; 
    } 

に移動