效果如图
三点动态加载.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个点 */ }
}
}