需要引入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效果的更多相关文章

  1. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  2. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  3. 网页Loading效果

    问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...

  4. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  5. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  6. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. 页面loading效果

    当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...

  8. 一个不错的loading效果--IT蓝豹

    一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. Hibernate级联及控制反转的增删改查

    在JavaHibernate中,双向多对一的操作一直是一个重点难点,本篇文章就是来探讨这个问题. 双向多对一:一个班级对应多个学生,多个学生同属于一个班级,通过班级信息可以查到班级内的学生,通过学生可 ...

  2. 基于Saltstatck实现页面实时显示tomcat启动日志(17)

    一.相关文件 master端: /srv/salt/tomcat/start.sls               #tomcat启动服务state.sls,须要自己创建 /srv/salt/tomca ...

  3. 深入解析alloc/retain/release/dealloc实现

    首先通过GNUstep上得源码来叙述各个函数的实现(GNUstep是Cocoa框架的互换框架,二者的行为和实现方式很相似) GNUstep源码中NSObject类的alloc方法: id = obj ...

  4. sone1动态树

    这尼吗桑心病狂的动态树:http://www.lydsy.com/JudgeOnline/problem.php?id=3153 终于让哥以一种碉堡的姿势过了: 牛B轰轰的最后两个都是我的...无法超 ...

  5. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  6. mongoDB: cursor not found on server

    查询mongoDB集合数据更新,数据有400w多.我一次用cursor(游标)取1w,处理更新.程序在某段时间运行中遍历游标时发生异常! DBCursor cursor = tabColl.find( ...

  7. 【Lucene】Apache Lucene全文检索引擎架构之搜索功能3

    上一节主要总结了一下Lucene是如何构建索引的,这一节简单总结一下Lucene中的搜索功能.主要分为几个部分,对特定项的搜索:查询表达式QueryParser的使用:指定数字范围内搜索:指定字符串开 ...

  8. ListView知识点汇总(9.2)

    1 最为基础的listview: http://www.cnblogs.com/allin/archive/2010/05/11/1732200.html http://blog.csdn.net/h ...

  9. 转 RabbitMQ

    转自:https://blog.thankbabe.com/2017/08/03/rabbitmq-demo/?from=cnblogs 介绍 RabbitMQ是一个由erlang开发的基于AMQP( ...

  10. nginx实现某个页面http访问,其余全部跳转到https

    全站https实现某个页面可以http访问,其余全部跳转到https,注意下面的location,如果不加root 配置 找不到这个文件的server { listen ; server_name w ...