項目里用到,雖說是小東西比較零碎,又不能用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;
}
}