漂亮实用的页面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 相关文章推荐
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
javascript实现画板功能
Apr 12 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
npm qs模块使用详解
2020/02/07 Javascript
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
企业行政文员岗位职责
2013/12/03 职场文书
餐饮加盟计划书
2014/01/10 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
房产协议书范本
2014/10/18 职场文书
营运督导岗位职责
2015/04/10 职场文书
拉贝日记观后感
2015/06/05 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电