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
rush:js;">
/*缓冲进度条 start*/
/**
*
显示loading(加载)动画
* @p
aram {[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函数就可以啦
rush:js;">
//
显示
buffer_tip_show('正在努力加载中');
//
不显示
buffer_tip_hidden();
动画效果无法截图额，将就看下
以上所述是小编给大家介绍的漂亮实用的页面loading(加载)封装代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文地址：https://www.jb51.cc/js/42077.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
