常用的网页加载进度条

下面有三种方式，看自己需求：

一、顶部进度条

在html代码中间插入jq代码执行动画。页面加载到哪部分，进度条就会相应的向前走多少

当全部加载完成后将loading进度条模块隐藏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="jquery.min.js"></script>
 8     <title>顶部进度条</title>
 9     <style>
10         .loading {position: fixed;top: 0;left: 0; width: 100%; height: 100%; background-color: #fff;}
11         .pic {width: 0;height: 10px;background-color: #c33;border-radius: 5px;}
12     </style>
13 </head>
14 <body>
15     <div class="loading">
16         <div class="pic"></div>
17     </div>
18     <header>
19         <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
20         <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
21     </header>
22     <script>
23         $(".loading .pic").animate({width: "20%"},100);
24     </script>
25     <section>
26         <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
27         <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
28     </section>
29     <script>
30         $(".loading .pic").animate({width: "40%"},100);
31     </script>
32     <section>
33         <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
34         <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
35     </section>
36     <script>
37         $(".loading .pic").animate({width: "60%"},100);
38     </script>
39     <section>
40         <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
41     </section>
42     <script>
43         $(".loading .pic").animate({width: "80%"},100);
44     </script>
45     <footer>
46         <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
47         <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
48     </footer>
49     <script>
50         $(".loading .pic").animate({width: "100%"},100, function() {
51             $(".loading").fadeOut();
52         });
53     </script>
54 </body>
55 </html>

二、直接在页面插入关于加载的动态图，页面加载完再隐藏掉

关于图片可以在这个网站找：https://loading.io/ 可以根据自己的需求调样式

当然，如果想自己写也可以，下面是博主自己用css3写的一个小动画

代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>css3动画进度条</title>
 8     <style>
 9         .loading {position: fixed;top:0;left:0;width: 100%; height: 100%;background-color: #fff;}
10         .pic {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height:40px;}
11         .pic i {float:left;margin: 0 2px;width: 6px;height: 30px;background-color: indigo;transform: scaleY(0.4);animation: load 1.2s infinite;}
12         .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
13         .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
14         .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
15         .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
16         .pic i:nth-child(6){-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
17         @-webkit-keyframes load {
18             0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4)}
19             20%{-webkit-transform: scaleY(1); transform: scaleY(1)}
20         }
21         @keyframes load {
22             0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4)}
23             20%{-webkit-transform: scaleY(1); transform: scaleY(1)}
24         }
25     </style>
26     <script src="jquery.min.js"></script>
27     <script>
28         document.onreadystatechange = function() {  // 页面状态发生改变时触发
29             if(document.readyState == "complete") {  // 页面加载完成时隐藏
30                 $(".loading").fadeOut();
31             }
32         }
33     </script>
34 </head>
35 <body>
36     <div class="loading">
37         <div class="pic">
38             <i></i>
39             <i></i>
40             <i></i>
41             <i></i>
42             <i></i>
43             <i></i>
44         </div>
45     </div>
46     <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
47     <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
48     <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
49     <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
50     <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
51     <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
52     <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
53     <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
54     <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
55 </body>
56 </html>

三、实时获取数据的进度条（百分比）

代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>百分比进度条</title>
 8     <style>
 9         .loading {position: fixed;top:0;left:0;width: 100%; height: 100%;background-color: #fff;}
10         .pic {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height:100px;line-height: 55px;text-align: center;font-size: 22px;}
11         .pic span {display: inline-block;position: absolute;top: 10px;left: 10px;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #999;
12                 -webkit-animation: move 1s infinite linear;animation: move 1s infinite linear;}
13         @-webkit-keyframes move {
14             0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
15             100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
16         }
17         @keyframes move {
18             0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
19             100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
20         }
21     </style>
22     <script src="jquery.min.js"></script>
23     <script>
24         $(function() {
25             var img = $("img"); // 获取所有的img元素
26             var num = 0;  // 用来存储已加载的图片个数
27             img.each(function(i) {  // 遍历所有图片
28                 var oImg = new Image();
29                 oImg.onload = function() { // onload 图片加载完成后执行
30                     num++;
31                     $(".pic p").html(parseInt(num / img.length * 100) + ‘%‘);
32                     if(num >= img.length) {
33                         $(".loading").fadeOut(); // 页面加载完成后隐藏
34                     }
35                 }
36                 oImg.src = img[i].src;
37             })
38         })
39     </script>
40 </head>
41 <body>
42     <div class="loading">
43         <div class="pic">
44             <span></span>
45             <p>0%</p>
46         </div>
47     </div>
48     <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
49     <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
50     <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
51     <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
52     <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
53     <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
54     <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
55     <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
56     <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
57 </body>
58 </html>

原文地址：https://www.cnblogs.com/sunyan-blog/p/12109037.html

时间： 2024-07-30 08:18:07

常用的网页加载进度条的相关文章

Chromium中网页加载进度条研究

1. Shell.java中有成员变量:mProgressDrawable. 该成员变量在方法:onFinishInflate中被初始化. 在该类中有方法:onLoadProgressChanged,该方法中对进度条的值进行改变,并且对刷新完成事件进行反馈. 2. 上面的这个方法是在cc文件中被调用的. 上面方法对应的cc方法是shell_android.cc文件中的LoadProgressChanged方法. voidShell::LoadProgressChanged(Web

HTML5 CSS3 诱人的实例：网页加载进度条的实现，下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务,网页加载等:如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1.html结构: <div id="loadBar01" class="loadBar"> <div> <span class="percent&qu

网页加载进度条的实现

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

网页加载进度条

( 网页加载时,有时内容过多,一直加载等待,而此时网页显示白色不显示任何的东西,给用户的体验相当不好,所以,一般会在网页加载成功前,会以进度条的形式,给用户进行展示.让用户可以看到动画,知道网页正在加载中) 常见的方式有以下: 1. 定时器的进度条(假的) <script type="text/javascript"> $(function(){ var loading='<div class="loading">&l

【css系列】创建网页加载进度条

一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器的进度条</title> <script src="../js/jquery-3.2.1.j

iOS WKWebView添加网页加载进度条(转)

一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView *wkWebView; @property (nonatomic, strong) UIProgressView *progressView; 2.初始化progressView - (void)viewDidLoad { [super viewDidLoad]; //进度条初始化 self.pr

网页加载进度条的JS程序开发思路与实际应用

一款好的产品,都需要有一个漂亮的loading界面.lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感. loading进度条更是对当前加载进度的一个良好反馈.从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面.带有进度条的loading界面在程序中并不罕见,但是在web中呢?到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度,所以无法直接.便捷的获得页面加载进度的反馈.本文主要是讲述如何以通过jquery的方式来实现页面加载进度的

Jquery网页加载进度条（随笔，当然要随便写，当日记动态心情写咯）

首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了...T_T,25年的单身生涯.终于走到了尽头......然后妹子也是前端...为了保证光辉形象.我必要努力提升技术然后么今天闲的蛋疼,再看看一帮大牛们的装逼网站,然后无意间看到这一段,只想说大牛们的世界真会玩.... 利用图片上data,还有load 最后在用document.readyState

webview添加网页加载进度条

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