使用css实现省略号加载动画

环境

• win10
• vscode
• vue2.x

代码

<div class="dot">
	动态省略号
	<span class="dot-ani"></span>
</div>
<style>
.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)
      }
    }
</style>

参考文章：https://www.jianshu.com/p/f8080d8c700d