前端loading... css实现
2017-11-02 本文已影响48人
汪槑槑2017
项目里用到，虽说是小东西比较零碎，又不能用gif代替，
but没有是大前端做不到的，看了老鸟的查了些css资料才实现，
<--- HTML ---->
<div class="loading">Loading</div>
<-- CSS -->
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis 2s infinite;
-moz-animation: ellipsis 2s infinite;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
@-moz-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
@-webkit-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
