CSS 中 content换行符实现打点 loading 正在加载中的效果

我们动态加载页面内容的时候，经常会使用“正在加载中…”这几个字，基本上，后面的 3 个点都是静态的。静态的问题在于，如果网络不流畅，加载时间比较长，就会给人有假死的 感觉，但是，如果是点点点这种横向的动画效果，用户就会耐心很多，体验也会好很多，用户 流失率就会有所下降。没错，我们可以利用这里的’\A’换行特性让“…”这几个字符动起来

HTML 代码如下:

正在加载中<dot>...</dot>

CSS 代码如下:

  dot {
   
   
      display: inline-block;
      height: 1em;