方法摘自：张鑫旭《CSS世界》

<div>努力加载中<dot>...</dot></div>

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

代码解释：

1、为什么使用<dot>元素？

<dot>是一个自定义元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8等低版本浏览器不认识自定义的HTML元素，因此会忽略<dot>元素，只显示其中的3点，同时会忽略下面用在<dot>元素上的CSS代码。

2、为什么使用::before, 可不可以使用::after？

伪元素使用::before同时display设置为block，是为了在高版本浏览器中将<dot>元素中的3点推到最下面，不影响content中的3行内容。

3、从content属性来看，是3个点在第一行，2个点在第二行，1个点在第三行，为什么这么处理？

3个 点在第一行的目的在于兼容IE9浏览器，因为IE9浏览器认识<dot>元素以及::before，但是不支持CSS3的animation属性，所以，为了在IE9浏览器中显示静态的3个点，才把3个点放在第一行。

4、white-space值为什么使用pre-wrap而不是pre？

也可以使用pre，在这里效果一样，就是为了实现3行显示点。