CSS动画奇怪的跳跃点

Question

我的Loader有以下CSS类：

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

我这样使用它：

select c.CustID, min(c.Name) as Name
from Customer c inner join Product p
    on p.CustID = c.CustID
where p.Item in ('Toaster', 'Breadbox')
group by c.CustID
having
    max(p.Item) = 'Toaster' and min(p.Item) = 'Toaster'

正如您所看到的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;
  }