我们动态加载页面内容的时候，经常会使用“正在加载中…”这几个字，基本上，后面的 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 控制垂直位置，依次展示每一行的内容。
只是其他一些细节怕是很多人反而有疑问。
- 为什么使用
<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 是将光标“垂直”移动到下一行。
效果图：
