动态三个点请求中加载中...原创

动态…
在请求或加载中显示

html代码

css代码

.dotting {
 display: inline-block; min-width: 2px; min-height: 2px;
 box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
 animation: dot 4s infinite step-start both; /* for IE10+, ... */
 /* *zoom: expression(this.innerHTML = ...);  for IE7. 如果不需要兼容性IE7, 此行删除 */
}
.dotting:before { content: ......; } /* for IE8. 如果不需要兼容性IE8, 此行和下一行将被删除。*/
.dotting::before { content: ; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/

@keyframes dot {
 25% { box-shadow: none; }                                  /* 0个点 */
 50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
 75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}