js ajax加载时的进度条代码

最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件。切记不要忘记引入jquery.js

css文件

#_loadMsg{
 display: inline-block;
 width: 100%;
 text-align: center;
 line-height: 45;
 padding-left: 20px;
 display : none;
}

#_loading_div {
 vertical-align: middle;
 display: inline-block;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 text-align: center;
 position: absolute;
 z-index: 3;
 line-height: 40;
 opacity: 0.5;
 display : none;
 background: #CCCCCC;
}

#_loading_div span {
 display: inline-block;
 width: 10px;
 height: 40px;
 animation-name: scale;
 -webkit-animation-name: scale;
 -moz-animation-name: scale;
 -ms-animation-name: scale;
 -o-animation-name: scale;
 animation-duration: 1.2s;
 -webkit-animation-duration: 1.2s;
 -moz-animation-duration: 1.2s;
 -ms-animation-duration: 1.2s;
 -o-animation-duration: 1.2s;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -ms-animation-iteration-count: infinite;
 -o-animation-iteration-count: infinite;
}
span.item-1 {
 background: #2ecc71;
}
span.item-2 {
 background: #3498db;
}
span.item-3 {
 background: #9b59b6;
}
span.item-4 {
 background: #e67e22;
}
span.item-5 {
 background: #c0392b;
}
span.item-6 {
 background: #e74c3c;
}
span.item-7 {
 background: #e74c8c;
}

.item-1 {
 animation-delay: -1s;
 -webkit-animation-delay: -1s;
 -moz-animation-delay: -1s;
 -ms-animation-delay: -1s;
 -o-animation-delay: -1s;
}

.item-2 {
 animation-delay: -0.9s;
 -webkit-animation-delay: -0.9s;
 -moz-animation-delay: -0.9s;
 -ms-animation-delay: -0.9s;
 -o-animation-delay: -0.9s;
}

.item-3 {
 animation-delay: -0.8s;
 -webkit-animation-delay: -0.8s;
 -moz-animation-delay: -0.8s;
 -ms-animation-delay: -0.8s;
 -o-animation-delay: -0.8s;
}

.item-4 {
 animation-delay: -0.7s;
 -webkit-animation-delay: -0.7s;
 -moz-animation-delay: -0.7s;
 -ms-animation-delay: -0.7s;
 -o-animation-delay: -0.7s;
}

.item-5 {
 animation-delay: -0.6s;
 -webkit-animation-delay: -0.6s;
 -moz-animation-delay: -0.6s;
 -ms-animation-delay: -0.6s;
 -o-animation-delay: -0.6s;
}

.item-6 {
 animation-delay: -0.5s;
 -webkit-animation-delay: -0.5s;
 -moz-animation-delay: -0.5s;
 -ms-animation-delay: -0.5s;
 -o-animation-delay: -0.5s;
}

.item-7 {
 animation-delay: -0.4s;
 -webkit-animation-delay: -0.4s;
 -moz-animation-delay: -0.4s;
 -ms-animation-delay: -0.4s;
 -o-animation-delay: -0.4s;
}

@-webkit-keyframes scale {
 0%, 40%, 100% {
 -moz-transform: scaleY(0.2);
 -ms-transform: scaleY(0.2);
 -o-transform: scaleY(0.2);
 -webkit-transform: scaleY(0.2);
 transform: scaleY(0.2);
 }

 20%, 60% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
}
@-moz-keyframes scale {
 0%, 40%, 100% {
 -moz-transform: scaleY(0.2);
 -ms-transform: scaleY(0.2);
 -o-transform: scaleY(0.2);
 -webkit-transform: scaleY(0.2);
 transform: scaleY(0.2);
 }

 20%, 60% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
}
@-ms-keyframes scale {
 0%, 40%, 100% {
 -moz-transform: scaleY(0.2);
 -ms-transform: scaleY(0.2);
 -o-transform: scaleY(0.2);
 -webkit-transform: scaleY(0.2);
 transform: scaleY(0.2);
 }

 20%, 60% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
}
@keyframes scale {
 0%, 40%, 100% {
 -moz-transform: scaleY(0.2);
 -ms-transform: scaleY(0.2);
 -o-transform: scaleY(0.2);
 -webkit-transform: scaleY(0.2);
 transform: scaleY(0.2);
 }

 20%, 60% {
 -moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
}

js文件

var loading = {
 baosight : {
  showPageLoadingMsg : function(showMessage){
  if($("#_loading_div").length == 0){
   $("body").append('<div id="_loading_div"><span class="item-1"></span><span class="item-2"></span><span class="item-3"></span><span class="item-4"></span><span class="item-5"></span><span class="item-6"></span><span class="item-7"></span></div>');
  }
  if($("#_loadMsg").length == 0){
   $("body").append('<div id="_loadMsg">正在加载,请稍候... ...</div>');
  }
  if(showMessage == true || showMessage == "true" ){
   $("#_loadMsg").show();
  }
  $("#_loading_div").show();
  },
  hidePageLoadingMsg :function() {
  $("#_loading_div").hide();
  $("#_loadMsg").hide();
  }
 }
}

以上内容是本文的全部叙述,希望大家喜欢。

时间: 2015-10-12

原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

JS与HTML结合实现流程进度展示条思路详解

效果如下: 一.设计思路 分为以下几步(仅供参考) [竖线线] 这个采用ul的list标签制作,保证了可随时添加,以及纵向排布 [小圆圈] html标签好像没有提供小圆圈标签,此处采用,div添加弧度角完成,,正方形的div添加弧度等于div的长(或者宽),就能够实现小圆圈.带子就更简单了,,div里直接添加文字即可 [文字] 文字要求紧跟小圆圈,,且与小圆圈保持同一水平高度,此处采用,position: absolute;设置top完成同一水平高度的布局 [动态效果] 前端的动态效果,不用说肯

JavaScript实现水平进度条拖拽效果

本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit

jquery插件NProgress.js制作网页加载进度条

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

直接拿来用的页面跳转进度条JS实现

本文实例介绍了基于javascript实现的页面跳转进度条,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <HTML> <HEAD> <TITLE>open代码</TITLE> <SCRIPT type=text/javascript> <!-- var ie5 = (document.all && document.getElementsByTagName); var step = 0; function se

js HTML5 Ajax实现文件上传进度条功能

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

JavaScript实现网页加载进度条代码超简单

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

javascript 实现页面加载进度条代码

New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

jquery网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

教您去掉ie网页加载进度条的方法

这样虽没有对功能有什么影响,可是体验总不怎么好,那如何解决这个问题了,网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的,可是我发现这个方法这样的情形下并不怎么好使. 复制代码 代码如下: <div> <ul> <li><a href="1.html" target="page"></a></li> <li><a hre

用jQuery模拟页面加载进度条的实现代码

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

javascript实现一个网页加载进度loading

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进

自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

基于jQuery实现模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7