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

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

HTML 代码如下:

html 复制代码

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

CSS 代码如下:

css 复制代码

  dot {
      display: inline-block;
      height: 1em;
      line-height: 1;
      text-align: left;
      vertical-align: -0.25em;
      overflow: hidden;
    }
    dot::before {
      display: block;
      content: '...\A..\A.';
      white-space: pre-wrap;
      animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
      33% {
        transform: translateY(-2em);
      }
      66% {
        transform: translateY(-1em);
      }
    }

效果即达成，IE6 至 IE9 浏览器下是静态的点点点，支持 animation 动画的浏览器下全部都是打点 loading 动画效果，颜色大小可控，使用非常方便。

动画实现的原理不难理解，插入 3 行内容，分别是 3 个点、2 个点和 1 个点，然后通过 transform 控制垂直位置，依次展示每一行的内容。

只是其他一些细节怕是很多人反而有疑问。

为什么使用<dot>这个元素?
为什么使用::before，可不可以使用::after?
从 content 属性值来看，是 3 个点在第 1 行，而 1 个点反而在最后一行，为什么这么处理?
这里 white-space 值为何使用的是 pre-wrap 而不是 pre?

这 4 个问题的答案分别如下。

<dot>是自定义的一个标签元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8 等低版本浏览器不认识自定义的 HTML 标签，因此，会乖乖地显示里面默认的 3 个点，对我们的 CSS 代码完全忽略。
伪元素使用::before 同时 display 设置为 block，是为了在高版本浏览器下原来的 3 个点推到最下面，不会影响 content 的 3 行内容显示，如果使用::after 怕是效果就很难实现了。
3 个点在第一行的目的在于兼容 IE9 浏览器，因为 IE9 浏览器认识<dot>以及::before，但是不支持 CSS 新世界的 animation 属性，所以，为了 IE9 也能正常显示静态的 3 个点，故而把 3 个点放在第一行。
这里的 white-space:pre-wrap 改成 white-space:pre 效果其实是一样的，之所以使用 pre-wrap 作为值完全是心情使然。关于两者的差异本书后面会介绍，这里先不用深究。

还有最后几个小技巧，首先，'\A'是不区分大小写的;其次，'\D'也能实现换行效果，但是，要想上下行对齐，需要用在::before 伪元素上，因为 CR 是将光标移动到当前行的开头，而 LF 是将光标"垂直"移动到下一行。

效果图：