漂亮实用的页面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 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
javascript性能优化之分时函数的介绍
Mar 28 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
理解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 magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
Javascript下的keyCode键码值表
2007/04/10 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Ajax基础知识详解
2017/02/17 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
vue 移动端适配方案详解
2018/11/15 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python中int与str互转方法
2018/07/02 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
python 实现波浪滤镜特效
2020/12/02 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
学习演讲稿范文
2014/05/10 职场文书
公司晚会策划方案
2014/05/17 职场文书
2014年中秋寄语
2014/08/11 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB