“正在加载中...”CSS效果实现

先上代码：

dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.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);
    }

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

效果：

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 作为值完全是心情使然。

TIPS:

1. '\A’

还有最后几个小技巧，首先，'\A'是不区分大小写的；其次，'\D'也能实现换行效果，但是，要想上下行对齐，需要用在::before 伪元素上，因为CR 是将光标移动到当前行的开头，而LF 是将光标“垂直”移动到下一行。
'\A'其实指的是换行符中的LF 字符，其Unicode编码是000A，在CSS 的content 属性中则直接写作'\A'；换行符除了LF 字符还有CR 字符，其Unicode 编码是000D，在CSS 的content 属性中则直接写作'\D'。CR 字符和LF 字符分别指回车（CR）和换行（LF），content 字符生成强大之处就在于不仅普通字符随便插，Unicode字符也不在话下。

2. white-space

white-space 指定元素内的空白怎样处理

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

3. animation-timing-function

animation-timing-function 规定动画的速度曲线

除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间, 动画效果是连贯性的。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式

4. 理解steps

steps函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受start和 end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

参考：CSS世界