漂亮实用的页面loading(加载)封装代码

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

html

<!-- 缓冲提示条 --> 
<div class='buffer hidden' id='buffer' > 
  <div class="spinner"> 
   <span class='buffer_tip' id='buffer_tip' >正在登陆</span> 
   <div class="rect1"></div> 
   <div class="rect2"></div> 
   <div class="rect3"></div> 
   <div class="rect4"></div> 
   <div class="rect5"></div> 
  </div> 
</div> 
<!-- 缓冲提示条 --> 

css

/*缓冲提示条 start*/ 
.buffer{ 
  background-color: black; 
  height: 120px; 
  width: 60%; 
  margin: auto; 
  filter: alpha(Opacity=60); 
  -moz-opacity: 0.6; 
  opacity: 0.85; 
  border-radius: 7px; 
} 
.buffer_tip{ 
 color: wheat; 
 font-size: 20px; 
 display: block; 
 padding-top: 15px; 
} 
.spinner { 
 margin: -190% auto; 
 height: 60px; 
 text-align: center; 
 font-size: 10px; 
} 
.spinner > 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%, 40%, 100% { 
  transform: scaleY(0.4); 
  -webkit-transform: scaleY(0.4); 
 } 20% { 
  transform: scaleY(1.0); 
  -webkit-transform: scaleY(1.0); 
 } 
} 
/*缓冲提示条 end*/ 

js

/*缓冲进度条 start*/ 
/** 
 * 显示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(加载)封装代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# loading加载  # 漂亮的loading  # js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】  # jquery显示loading图片直到网页加载完成的方法  # IOS中UIWebView加载Loading的实现方法  # 基于jquery的loading 加载提示效果实现代码  # js loading加载效果实现代码  # 制作Flash Loading 加载进度条  # 加载  # 小编  # 进度条  # 在此  # 要做  # 给大家  # 找了  # 就看  # 所述  # 给我留言  # 以备  # 感谢大家  # 就可以  # 请稍等  # 疑问请  # 有任何  # 直接调用  # 未来  # 加载中  # 网上 

相关文章： 制作网站怎么制作,*游戏网站怎么搭建？  如何访问已购建站主机并解决登录问题？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  建站之星云端配置指南：模板选择与SEO优化一键生成  教学网站制作软件,学习*后期制作的网站有哪些？  如何通过主机屋免费建站教程十分钟搭建网站？  建站之星如何开启自定义404页面避免用户流失？  如何快速搭建高效香港服务器网站？  寿县云建站：智能SEO优化与多行业模板快速上线指南  高性价比服务器租赁——企业级配置与24小时运维服务  建站上传速度慢？如何优化加速网站加载效率？  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  北京网站制作公司哪家好一点,北京租房网站有哪些？  建站之星如何助力企业快速打造五合一网站？  公众号网站制作网页,微信公众号怎么制作？  如何通过建站之星自助学习解决操作问题？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  建站之星伪静态规则如何设置？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  宝塔建站助手安装配置与建站模板使用全流程解析  如何在IIS中配置站点IP、端口及主机头？  做企业网站制作流程,企业网站制作基本流程有哪些？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  建站之星展会模版如何一键下载生成？  如何在阿里云域名上完成建站全流程？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  C#怎么创建控制台应用 C# Console App项目创建方法  seo网站制作优化,网站SEO优化步骤有哪些？  如何选择网络建站服务器？高效建站必看指南  电商网站制作价格怎么算,网上拍卖流程以及规则？  建站之星安装路径如何正确选择及配置？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  相册网站制作软件,图片上的网址怎么复制？  如何破解联通资金短缺导致的基站建设难题？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何在云指建站中生成FTP站点？  个人摄影网站制作流程,摄影爱好者都去什么网站？  制作农业网站的软件,比较好的农业网站推荐一下？  专业商城网站制作公司有哪些,pi商城官网是哪个？  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  如何做网站制作流程,*游戏网站怎么搭建？  如何用腾讯建站主机快速创建免费网站？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  制作门户网站的参考文献在哪,小说网站怎么建立？  简历在线制作网站免费,免费下载个人简历的网站是哪些？