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

HTML 代码如下:

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

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 控制垂直位置，依次展示每一行的内容。

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

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

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

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

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