Jquery实现loading效果
需要引入jquery和bootstrap相关包,然后把下面的代码复制进去就可以了:
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
<div class="progress progress-striped active" style="margin-bottom: 0;">
<div class="progress-bar" style="width: 100%;"></div>
</div>
<h5>loading...</h5>
</div>
</div>
<script>
showLoading = function(){
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
}
hideLoading = function(){
$('#loadingModal').modal('hide');
}
</script>
Jquery实现loading效果的更多相关文章
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 网页Loading效果
问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 页面加载时loading效果
页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 页面loading效果
当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...
- 一个不错的loading效果--IT蓝豹
一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- DataSet之增删改查操作(DataGridView绑定)
DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...
- [PWA] Cache Third Party Resources from a CDN in a React PWA
Our service worker caches our static assets - but only those assets that are included in our React A ...
- Codeforces #263 div2 解题报告
比赛链接:http://codeforces.com/contest/462 这次比赛的时候,刚刚注冊的时候非常想好好的做一下,可是网上喝了个小酒之后.也就迷迷糊糊地看了题目,做了几题.一觉醒来发现r ...
- 代理工具Charles使用
代理工具Charles使用 分类: MAC 2014-03-27 20:41 7810人阅读 评论(2) 收藏 举报 手机开发 一.跟踪HTTPS 1.下载官方的证书ssl.zip证书,解压成*.cr ...
- group by having和connect by
--使用group by 子句对数据进行分组:对group by 子句形成的组运行聚集函数计算每一组的值:最后用having 子句去掉不符合条件的组.--having 子句中的每一个元素也必须出现在s ...
- 防火墙firewall的设置和查看
systemctl start firewalld.service # 开启防火墙firewallsystemctl stop firewalld.service # 停止防火墙firewall sy ...
- 170621 - Android ADB forward端口映射和reverse反向代理 使用笔记
个人理解 forward:端口映射 将本地PC指定Port端口,映射到设备手机指定Port端口上.以便解决 PC -> Phone 的访问问题PC 作为Client客户端 可以任意访问 Phon ...
- Windows下UEFI环境的搭建
Windows下UEFI环境的搭建 一.环境准备 1. 安装2012及以上VS https://visualstudio.microsoft.com/ 2.下载NASM 2.13.03 http:/ ...
- 深入浅出MySQL事务处理和锁机制
1. 事务处理和并发性 1.1. 基础知识和相关概念 1 )全部的表类型都可以使用锁,但是只有 InnoDB 和 BDB 才有内置的事务功能. 2 )使用 begin 开始事务 ...
- lua学习笔记(三)
类型与值 lua是一种动态类型的语言,在语言中没有类型定义的语法,每个值都携带了它自身的类型信息 lua中有8种基础类型 nil 只与自身相等assert(nil==nil ...