漂亮实用的页面loading(加载)封装代码
更新时间:2017年2月8日 10:00 点击:1765
要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个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(加载)封装代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考,具体如下:这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实...2015-10-30
- 本篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码,以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下 ...2017-03-13
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24- 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕的方法汇总,需要的朋友参考下...2016-02-12
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26- 这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
- 这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下...2016-05-04
- 本篇文章主要介绍了AngulerJS学习之按需动态加载文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-02-19
- angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果反回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类...2015-12-29
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
这篇文章主要介绍了EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)的相关资料,需要的朋友可以参考下...2016-02-23- 本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧...2017-04-03
- 这篇文章主要介绍了jQuery加载及解析XML文件的方法,结合实例形式分析了xml文件的创建及jQuery针对xml文件的获取、解析相关操作技巧,需要的朋友可以参考下...2017-01-26
- 这篇文章主要介绍了基于javascript实现页面加载loading效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-03-22
- Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性,通过本文给大家介绍JavaScript图像延迟加载库Echo.js ,感兴趣的朋友一起学习吧...2016-04-06
- 延迟加载通常是直到用户交互时才加载,那么如何实现延时加载的呢?下面通过本文一起学习AngularJS中的Directive实现延迟加载,对angularjs延时加载相关知识感兴趣的朋友一起学习吧...2016-01-26
- 这篇文章主要为大家详细介绍了JavaScript实现无穷滚动加载数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
- 这篇文章主要介绍了javascript实现简单加载随机色方块的相关资料,感兴趣的小伙伴们可以参考一下...2015-12-27
- 这篇文章主要介绍了超炫酷的WPF实现Loading控件效果,感兴趣的小伙伴们可以参考一下...2020-06-25
- 在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画,下面看下实现代码...2016-12-02