Html
    Css
    Js

    
                        
/* 上拉加载 */
	.load_more_box {
	height:40px;
	line-height:40px;
	position:relative;
	text-align:center;
}
.load_more_box span {
	width:5px;
	height:5px;
	margin:0 1px;
	display:inline-block;
	vertical-align:middle;
	background:#9b59b6;
	animation:load_more_box 1.5s  infinite ease-in-out;
}
.load_more_box span:nth-child(2) {
	animation-delay:.2s;
}
.load_more_box span:nth-child(3) {
	animation-delay:.4s;
}
.load_more_box span:nth-child(4) {
	animation-delay:.6s;
}
.load_more_box span:nth-child(5) {
	animation-delay:.8s;
}
@keyframes load_more_box {
	0% {
	height:5px;
	background:#9b59b6;
}
25% {
	height:30px;
	background:#0081ff;
}
50% {
	height:5px;
	background:#9b59b6;
}
100% {
	height:5px;
	background:#9b59b6;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css加载中动画(原创)

更新时间:2019-11-18 22:44:09

使用简单的css animation动画, 通过延时,为dom中的每一个span标签改变高度,达到信号式加载中动画。

0