首页 / JAVASCRIPT / js ajax加载时的进度条代码

js ajax加载时的进度条代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js ajax加载时的进度条代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4360字，纯文字阅读大概需要7分钟。

内容图文

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

js ajax加载时的进度条代码 - 文章图片

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();
  }
 }
}

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

内容总结

以上是互联网集市为您收集整理的js ajax加载时的进度条代码全部内容，希望文章能够帮你解决js ajax加载时的进度条代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/382159.html

来源：【匿名】

【上一篇】Ajax上传实现根据服务器端返回数据进行js处理的方法【下一篇】javascript 怎么调用php方法

更多 ►

【js ajax加载时的进度条代码】教程文章相关的互联网学习教程文章

Javascript实现一个进度条【代码】【图】

HTML代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <script type="text/javascript"> function showProgressBar(){ //预定义颜色 var colors = ["#5B00AE","#28FF28","#FF8000","#00DB00","#408080","#79FF79"];...

Javascript: 动态显示进度条【代码】

1 {% if not config.exec_id == ‘‘ %}2 <br />3 <div class="progress">4 <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 0%" id="progressbar">5 0%6 </div>7 </div>8 9 <script type="text/javascript"> 10var timerId = setInterval(getCurrentProgress, 1000); 11 ...

javascript – 在循环多个变量时使用setTimeout更新进度条【代码】

假设您有3个要循环的数组,长度为x,y和z,并且对于每个循环,您需要更新进度条.例如：function run() {x = 100;y = 100;z = 10;count = 0;for (i=0; i<x; i++) {//some codefor (j=0; j<y; j++) {// some codefor (k=0; k<z; k++) {//some code$("#progressbar").reportprogress(100*++count/(x*y*z));}}} }但是,在此示例中,进度条在函数完成之前不会更新.因此,我相信我需要使用setTimeout在函数运行时更新进度条,尽管我不知道如何在嵌...

javascript-PHP+JS实现带有进度条或数字进度的文件上传

php为后台，配合js插件实现文件上传，有什么好的插件么，大神们谁知道介绍一款吧？第二个问题：如果不能操作服务器，可以获取到上传到服务器的文件进度么？？回复内容：php为后台，配合js插件实现文件上传，有什么好的插件么，大神们谁知道介绍一款吧？第二个问题：如果不能操作服务器，可以获取到上传到服务器的文件进度么？？jquery file uploadjQuery上传插件Uploadify使用详解，提供参考：http://fwhyy.com/2010/01/jque...上...

一个js+css进度条效果，上传后ie无效，哪位朋友能指点一下，谢谢！

火狐都正常，就是IE和360无效果，如果不放到服务器，直接运行进度条.html，360也正常，但是放到网站里，运行进度条.html，360就不正常了，真是不懂是什么原因？我测试是整个进度条文件夹放到网站根目录的，css和js都没变，直接运行文件夹里的 text.html，360也正常，但是通过 http://127.0.0.1/text.html这样，火狐也正常，360不行回复讨论(解决方案) http://127.0.0.1/text.html 这个ie下有不有问题？ text...

网页中包含iframe，js更改location.href之后进度条一直在加载。该如何解决

网页中包含iframe，js 更改location.href之后进度条一直在加载。a.htm结果 a.htm的进这度条一直在加载。实际程序已经运行完了。而且直接运行abc.php也没问题。------解决方案--------------------你那里肯定有问题，我刚刚试过了，没事的啊，运行完后进度条是显示已经完成的了，（我用的是IE7），可能是你那个abc.php有判断语句什么的？你把abc.php贴出来看看 ------解决方案--------------------关注..有时候我也会遇到这种情况,...

一个js+css进度条效果，上传后ie无效，哪位朋友能指点一下，多谢

一个js+css进度条效果，上传后ie无效，哪位朋友能指点一下，谢谢！火狐都正常，就是IE和360无效果，如果不放到服务器，直接运行进度条.html，360也正常，但是放到网站里，运行进度条.html，360就不正常了，真是不懂是什么原因？我测试是整个进度条文件夹放到网站根目录的，css和js都没变，直接运行文件夹里的 text.html，360也正常，但是通过 http://127.0.0.1/text.html这样，火狐也正常，360不行------解决方案--------------...

PHP中使用Session配合Javascript实现文件上传进度条功能_php技巧

Web应用中常需要提供文件上传的功能。典型的场景包括用户头像上传、相册图片上传等。当需要上传的文件比较大的时候，提供一个显示上传进度的进度条就很有必要了。在PHP 5.4以前，实现这样的进度条并不容易，主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件，通用性不足，且易带来安全隐患。不过由于Flash的使用比较广泛，因此还是有很多网站使用Flash作为...

PHP中使用Session配合Javascript实现文件上传进度条功能

php+javascript实现的动态显示服务器运行程序进度条功能示例【图】

本文实例讲述了php+javascript实现的动态显示服务器运行程序进度条功能。分享给大家供大家参考，具体如下：经常有这样的业务要处理，服务器上有较多的业务需要处理，需要分批操作，于是就需要一个提示客户现在完成进度的进度条。这个是php+javascript的进度条。 <?php //set_time_limit(0); //注意，如果是安全模式，请不要打开，如果不是安全模式，这个选项可以打开 for ($i = 0; $i < 500; $i++) {$users[] = Tom_ . $i; } ...

如何实现jQuery进度条效果【图】

通过jQMeter.js插件可以简单的实现jQuery进度条效果，并且可以自定义它的样式【推荐课程：jQuery教程】实现jQuery进度条效果需要外部引入一个jQuery插件jQMeter.js.它是一款简单实用的轻量级进度条插件，通过它我们可以轻松放入实现带动画效果的水平或垂直进度条进度条实现过程：（1）外部引入jqmeter.js文件下载地址：http://www.gerardolarios.com/plugins-and-tools/jqmeter/<script src="jqmeter.min.js"></script> <script sr...

js如何创建动态加载的进度条？（代码示例）【图】

本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条？（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。进度条可以用来描述正在执行的任何任务的进度，它通常会被用于显示下载和上传时的状态。换句话说，进度条可以用来描述正在进行的任何事情的状态。下面我们就来看看使用JavaScript如何实现动态加载的进度条？我们需要执行以下步骤：1、为进度条创建HTML结构：下面的代码中包含两个名为“...

Vue进度条组件的实现教程（代码示例）【图】

本篇文章给大家带来的内容是关于 Vue进度条组件的实现教程（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 npm 等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。来看下 npm 搜索组件时候的效果：so 下面咱们一起动手实现一下呗。定义使用方式想实现一个组件的前提，一定要想好你的需求是什么，还要自己去定义...

js实现简单进度条效果的方法（代码实例）【图】

本篇文章给大家带来的内容是介绍js实现简单进度条效果的方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。不多说，直接上代码<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>ProgressBar</title><style>*{margin: 0;padding: 0;}#progress{width: 100%;height: 30px;background: rgb(42, 138, 248);}#bar{width: 1%;height: 28px;margin-top: 1px;background: purple;}</style></...

js实现自定义拖动进度条效果（代码实例）【图】

可拖动的进度条是如何制作的？本章给大家带来js实现自定义拖动进度条效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。先看看效果图：实例代码分三部分：HTML部分：<body><div id="demo"><div class="progress"><div class="progress-bar"><div class="progress-thumb"></div></div></div></div> </body>css部分：#demo { width: 600px; height: 100px; margin: 100px auto; display: flex; alig...

首页 / JAVASCRIPT / js ajax加载时的进度条代码

js ajax加载时的进度条代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【js ajax加载时的进度条代码】教程文章相关的互联网学习教程文章

AJAX - 相关标签

加载 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程