需要引入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. 谷歌安卓UI自动化测试策略

    中文翻译版: 为了使大家确信"应做单元测试,就一定能做单元测试",谷歌测试工程师Mona El Mahdy专门写了一篇博客,提出了几种执行安卓应用用户界面单元测试的方法.Mahdy ...

  2. Visual Studio 外请版本号管理插件 - AnkhSVN

    Visual Studio 外请版本号管理插件 - AnkhSVN 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致 ...

  3. #include <>与#include""区别

    <>先去系统目录中找头文件,如果没有在到当前目录下找.所以像标准的头文件 stdio.h.stdlib.h等用这个方法. 而""首先在当前目录下寻找,如果找不到,再到系 ...

  4. Python——五分钟理解元类(metaclasses)

    “元类的魔幻变化比 99% 的用户所担心的更多,当你搞不懂是否真的需要用它的时候,就是不需要.” —Tim Peters 本文源于在 PyCon UK 2008 上的一个快速演讲. 元类被称为 Pyt ...

  5. java替换文本中所有的正则符号 Java问题通用解决代码

    开发时遇到一个需求,需要对一段文本中的所有正则符号进行转义,不然使用split分割方法分割文本的话无效,想到用替换来做,全部替换正则符号为转义后的符号   贴java实现代码:   1.测试版     ...

  6. Delphi中定义了四种布尔类型:Boolean,ByteBool,WordBool和LongBool。后面三种布尔类型是为了与其他语言兼容而引入的

    bool是LongBool类型. Delphi中定义了四种布尔类型:Boolean,ByteBool,WordBool和LongBool.后面三种布尔类型是为了与其他语言兼容而引入的,一般情况下建议使 ...

  7. background API

    语法: background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial| ...

  8. hdu 5371 Hotaru&#39;s problem【manacher】

    题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=5371 题意: 给出一个长度为n的串,要求找出一条最长连续子串.这个子串要满足:1:能够平均分成三段 ...

  9. [译]NeHe教程 - 添加颜色

    原文: Adding Colour 上一节我讲解了如何在屏幕显示三角形和四边形.本节会讲解如何上色.单色(Flat)顾名思义就是只能涂一种实心的颜色.平滑颜色(Smooth)可以在各个顶点混合三种颜色 ...

  10. CentOS下使用yum快速安装memcached

    1. 查找Memcached yum search memcached 首先检查yum软件仓库中是否存在memcached,如果有 直接进入第3步安装即可,否则执行第2步. 2. 安装第三方软件库(可 ...