三点动态加载动画

效果如图

三点动态加载.png

一.html

加载中<span class="dotting">

二.css

@mixin dotting {
  $currentColor:#fff;
  .dotting {
    display: inline-block; min-width: 5px; min-height: 5px;
    box-shadow: 8px 0 $currentColor, 24px 0 $currentColor, 40px 0 $currentColor; /* for IE9+, ..., 3个点 */
    animation: dot 4s infinite step-start both; /* for IE10+, ... */
  }
  @keyframes dot {
    25% { box-shadow: none; }                                  /* 0个点 */
    50% { box-shadow: 8px 0 $currentColor; }                    /* 1个点 */
    75% { box-shadow: 8px 0 $currentColor, 24px 0 $currentColor;  /* 2个点 */ }
  }
}