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


Posted in Javascript onFebruary 03, 2017

要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个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(加载)封装代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js控制框架刷新
Aug 01 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
node.js博客项目开发手记
Mar 16 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 #Javascript
JavaScript数组复制详解
Feb 02 #Javascript
常用jQuery选择器汇总
Feb 02 #Javascript
JavaScript优化以及前段开发小技巧
Feb 02 #Javascript
JavaScript字符集编码与解码详谈
Feb 02 #Javascript
JS实现购物车特效
Feb 02 #Javascript
jQuery实现复选框的全选和反选
Feb 02 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python多进程fork()函数详解
2019/02/22 Python
基于python plotly交互式图表大全
2019/12/07 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
安卓程序员求职信
2014/02/28 职场文书
公司股东合作协议书
2014/09/14 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
结婚保证书
2015/01/16 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
售房协议书范本
2015/08/11 职场文书
志愿服务心得体会
2016/01/15 职场文书
Python WSGI 规范简介
2021/04/11 Python
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
一起来学习Python的元组和列表
2022/03/13 Python