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>

时间: 2024-08-24 22:05:50

Jquery实现loading效果的相关文章

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

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

之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各个浏览器,但是CSS3已经很强大到我们可以自己使用动画写出一个loading效果出来,然后再通过调用JQuery的ajaxStart()和ajaxStop()这两个事件处理函数,就可以实现我们想要的loading效果了. 这里主要介绍一个CSS3 loading的网站:http://cssload.

网页Loading效果

问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px

HTML5 Canvas 实现的9个 Loading 效果

Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Loading)加载动画效果. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

仿jQuery的siblings效果的js原生代码

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1  obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个

CSS3实现8种Loading效果【第二波】

今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊重一下作者! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

自动播放——幻灯片缓冲效果&amp;&amp;带Loading效果的图片切换&amp;&amp;移动效果(按轨迹移动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

基于jquery多种切换效果的焦点图(兼容ie6)

随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨.下面为大家介绍一款完全基于juery的焦点图,而且这款插件完美支持ie6,多种百叶窗切换,效果还是相当赏目的.无图无真相,还是先上图 点击这里在线预览 点击这里下载源码 使用教程 这款插件代码很简洁,使用也非常简单.看截图 ok.今天就和大家分享到这里.周末好快,作为一名码农真是苦逼,明天还要早起,

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu