css
div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%,40%,100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%,100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/*缓冲
提示条 end*/
js
显示loading(加载)动画
* @param {[type]} tip_text [
提示的
文字]
* @return {[type]} [description]
*/
function buffer_tip_show(tip_text){
$("#buffer_tip").html(tip_text ? tip_text : '请稍等');
$("#buffer").removeClass("hidden");
}
/**
*
不显示loading(加载)动画
* @return {[type]} [description]
*/
function buffer_tip_hidden(){
$("#buffer").addClass("hidden");
}
/*缓冲进度条 end*/
如果要显示或者不显示动画，直接调用js函数就可以啦
显示
buffer_tip_show('正在努力加载中');
//
不显示
buffer_tip_hidden();
动画效果无法截图额，将就看下
以上所述是小编给大家介绍的漂亮实用的页面loading(加载)封装代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/42077.html
