如何用css实现动态的省略号加载

作为一个前端工程师，在实际工作中，我们可能会经常碰到loading的原生实现，接下来我就用css写一个非常简单但是有用的省略号的加载，废话少说，show me the code。

<div class="dot">动态省略号<span class="dot-ani"></span></div>

.dot-ani {
      display: inline-block;
      height: 12px;
      line-height: 12px;
      overflow: hidden;
    }
    .dot-ani::after {
      display: inline-table;
      white-space: pre;
      content: "\A.\A..\A...";
      animation: spin 2s steps(4) infinite;
    }
    @keyframes spin {
      to{
        -webkit-transform:translateY(-48px);
        transform:translateY(-48px)
      }
    }

只需几个简单的css，就可以实现省略号的加载。

都去试试吧！！！