漂亮实用的页面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 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
xml转json的js代码
Aug 28 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js 通用订单代码
Dec 23 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Vue.js用法详解
2017/11/13 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
python实现简单中文词频统计示例
2017/11/08 Python
Python多线程原理与用法详解
2018/08/20 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python基于opencv 实现图像时钟
2021/01/04 Python
大学生最常用的自我评价
2013/12/07 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
辞职信标准格式
2015/02/27 职场文书
小学教学工作总结2015
2015/05/13 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
生日祝酒词大全
2015/08/10 职场文书