要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个html css js的功能封装，以备未来直接使用。

超文本标记语言

！-缓冲提示条-div class=' buffer hidden ' id=' buffer ' div class=' spinner ' span class=' buffer _ tip ' id=' buffer _ tip '正在登陆/span div class=' rect 1 '/div class=' rect 2 '/div class=' rect 3 '/div class=' rect 4 '/div class=' rect 5 '/div/div！-缓冲提示条- css

/*缓冲提示条开始*/。缓冲区{背景色：黑色；高度： 120像素；宽度： 60%;margin:自动筛选： alpha(不透明度=60);-莫兹-奥帕市3360 0.6；opacity:边界半径： 7px} .缓冲区_提示{ color:小麦；font-size : 20px显示器：块；衬垫-top : 15px；} .微调器{边际： -190%自动；高度： 60px文本对齐：中心；font-size : 10px} .spinner div {底色： # 67cf 22高度： 100%;宽度： 6px显示器：内联块；-网络套件-动画：拉伸延迟1.2s无限轻松自在；animation: stretchdelay 1.2s无限轻松自在；} .旋转器。rect 2 {-web套件-动画-延迟：-1.1s；动画-延迟：-1.1s；} .旋转器。rect 3 {-web套件-动画-延迟：-1.0s；动画-延迟：-1.0s；} .旋转器。rect 4 {-web套件-动画-延迟：-0.9s；动画-延迟：-0.9s；} .旋转器。rect 5 {-web套件-动画-延迟：-0.8s；动画-延迟：-0.8s；} @-网络工具包-关键帧拉伸延迟{ 0%、40%、100% {-web套件-transform : Scaley(0.4)} 20% {-web套件-transform : Scaley(1.0)} @关键帧拉伸延迟{ 0%，40%，100% { transform 3360 Scaley(0.4)}；-web套件-transform : Scaley(0.4)；} 20% { transform : Scaley(1.0)；-web套件-transform : Scaley(1.0)；} } /*缓冲提示条end*/js

/*缓冲进度条开始*//** *显示装载（加载)动画* @param {[type]} tip_text [提示的文字]* @ return {[type]}[description]*/function buffer _ tip _ show(tip _ text){ $(' # buffer _ tip ').html(tip_text？tip_text : '请稍等');$('#buffer ').removeClass(“”隐藏');} /** * 不显示装载（加载)动画* @ return {[type]}[description]*/function buffer _ tip _ hidden(){ $(' # buffer ')).addClass(')隐藏');} /*缓冲进度条end*/如果要显示或者不显示动画，直接调用射流研究…函数就可以啦

//显示buffer_tip_show('正在努力加载中');//不显示buffer _ tip _ hidden()；动画效果无法截图额，将就看下

以上所述是小编给大家介绍的漂亮实用的页面装载（加载)封装代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！