三种CSS方法实现loadingh点点点的效果
我们在提交数据的时候，在开始提交数据与数据提交成功之间会有一段时间间隔，为了有更好的用户体验，我们可以在这个时间段添加一个那处点点点的动画，如下图所示：
汇总了一下实现这种效果主要有三种方法：
第一种：box-shadow + animate;
第二种：animate;
第三种：等宽字体 + animate
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现loadingh点点点的效果</title>
<style type="text/css">
/* box-shadow+animate方法 */
.shadow_dot {
display: inline-block; min-width: 2px; min-height: 2px;
box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
-webkit-animation: shadow_dot 4s infinite step-start both;
animation: shadow_dot 4s infinite step-start both;
*zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.shadow_dot:before { content: '...'; } /* IE8 */
.shadow_dot::before { content: ''; }
:root .shadow_dot { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */
@-webkit-keyframes shadow_dot {
25% { box-shadow: none; }
50% { box-shadow: 2px 0 currentColor; }
75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
}
@keyframes shadow_dot {
25% { box-shadow: none; }
50% { box-shadow: 2px 0 currentColor; }
75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }
}
/* animate方法 */
.ani_dot {
font-family: simsun;
}
:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
}
@-webkit-keyframes dot {
0% { width: 0; margin-right: 1.5em; }
33% { width: .5em; margin-right: 1em; }
66% { width: 1em; margin-right: .5em; }
100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
-webkit-animation: dot 3s infinite step-start;
}
@keyframes dot {
0% { width: 0; margin-right: 1.5em; }
33% { width: .5em; margin-right: 1em; }
66% { width: 1em; margin-right: .5em; }
100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
animation: dot 3s infinite step-start;
}
/* 等宽字体+animate方法 */
dot {
display: inline-block;
width: 3ch;
text-indent: -1ch;
vertical-align: bottom;
overflow: hidden;
animation: dot 3s infinite step-start both;
/* 等宽字体很重要 */
font-family: Consolas, Monaco, monospace;
}
@keyframes dot {
33% { text-indent: 0; }
66% { text-indent: -2ch; }
}
</style>
</head>
<body>
<h3>利用box-shadow实现：</h3>
<div>
数据提交中<span class="shadow_dot"></span>
</div>
<h3>animate方法：</h3>
<div>
数据提交中<span class="ani_dot">...</span>
</div>
<h3>等宽字体+animate方法：</h3>
<div>
数据提交中<span>...</span>
</div>
</body>
</html>
大家可以自己动手实践一下~~
这三种方法来源地址如下：
再说CSS3 animation实现点点点loading动画
小tip: CSS3 animation渐进实现点点点等待提示效果
