正文 

当前位置： 首页 > java > java框架

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

霓裳梦竹      2022-02-09     120

关键词：

一、最简单或者明显的方式是使用定时器

    1、在网页中加入布局覆盖真实网页内容

    2、使用定时器确定加载所用时间的长短，其实并不是真正的加载进度实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的进度条</title>
  <script src="../js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    $(function () {
      setInterval(function () {
        $(".loading").fadeOut();
      },3000)
    })
  </script>
  <style type="text/css">
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index: 100;
      background-color: white;
    }
    .loading .pic{
      width: 64px;
      height: 64px;
      border: 1px solid red;
      background: url("./image/35.gif");
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right:0;
      margin: auto;

    }
  </style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>

 

二、在第一版中做改良

1、理论上还是使用定时器

2、覆盖的内容不在布局中定义而是动态加载

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的进度条</title>
  <script src="../js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    $(function () {
        var loading = ‘<div class="loading"><div class="pic"></div></div>‘;
        $("body").append(loading);
      setInterval(function () {
        $(".loading").fadeOut();
      },3000)
    })
  </script>
  <style type="text/css">
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index: 100;
      background-color: white;
    }
    .loading .pic{
      width: 64px;
      height: 64px;
      border: 1px solid red;
      background: url("./image/35.gif");
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right:0;
      margin: auto;

    }
  </style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>

 

三、通过加载状态实现进度条

document.onreadystatechange   页面加载状态改变时的事件
document.readyState  返回当前文档的状态
         uninitialized:还未开始载入
         loading:载入中
         interactive已加载。文档与用户可以开始交互
         complete:载入完成

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
  <style type="text/css">
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index: 100;
      background-color: white;
    }
    .loading .pic{
      width: 64px;
      height: 64px;
      border: 1px solid red;
      background: url("./image/35.gif");
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right:0;
      margin: auto;

    }
  </style>
  <script src="../js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    document.onreadystatechange = function () {
      console.log(document.readyState);
      if(document.readyState==‘complete‘){
          $(".loading").fadeOut();
      }
    }
  </script>
</head>
<body>
<div class="loading">
  <div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>

 

四、使用css创建进度条动画

1、我们可以在https://loading.io/网站上生成css动画图或者获得动画的css样式自己使用

2、我们可以在https://autoprefixer.github.io/?中自动做css的兼容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3创建动画</title>
  <style type="text/css">
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index: 100;
      background-color: white;
    }
    .loading .pic{
      width: 50px;
      height: 50px;
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right:0;
      margin: auto;

    }
    .loading .pic i{
      display: block;
      float: left;
      width: 6px;
      height: 50px;
      background: #399;
      margin: 0 2px;
      -webkit-transform: scaleY(0.4);
      -ms-transform: scaleY(0.4);
      transform: scaleY(0.4);
      -webkit-animation: load 1.2s infinite;
      animation: load 1.2s infinite;
    }
    .loading .pic i:nth-child(1){

    }
    .loading .pic i:nth-child(2){
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }
    .loading .pic i:nth-child(3){
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    .loading .pic i:nth-child(4){
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    .loading .pic i:nth-child(5){
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }
    @-webkit-keyframes load {
      0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
      20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
    }
    @keyframes load {
      0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
      20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
    }
  </style>
  <script src="../js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    document.onreadystatechange = function () {
      if(document.readyState == "complete"){
          $(".loading").fadeOut();
      }
    }
  </script>
</head>
<body>
<div class="loading">
  <div class="pic">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>

 






常见的网页加载进度条


 		<styletype="text/css">			/*遮罩在加载页面上的div样式*/			.loading{				width:100%;				height:100%;				position:fixed;				top:0;				left:0;				z-index:100;				background:white;			}			/*动态图片*/			.pic{  查看详情  

                

网页加载进度条的实现


本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是...  查看详情  

                

网页加载进度条


(网页加载时，有时内容过多，一直加载等待，而此时网页显示白色不显示任何的东西，给用户的体验相当不好，所以，一般会在网页加载成功前，会以进度条的形式，给用户进行展示。让用户可以看到动画，知道网页正在加载...  查看详情  

                

将视频加载到带有进度条的网页的最佳方法


】将视频加载到带有进度条的网页的最佳方法【英文标题】：Bestwaytoloadavideobeforeintoawebpagewithaprogressbar【发布时间】：2018-02-1904:36:30【问题描述】：我想在使用html5css和javascript的网站上播放大约30秒的视频。我想要的是确保在播...  查看详情  

                

网页加载进度条


1.定时器的进度条    代码:<!DOCTYPEhtml><htmllang="en"><head>	<metacharset="UTF-8">	<title>定时器的进度条</title>	<!--弊端:无论有没有缓存都要执行规定的事件,不切合实际-->	<styl  查看详情  

                

ioswkwebview添加网页加载进度条(转)


一、效果展示WKWebProgressViewDemo.gif二、主要步骤1.添加UIProgressView属性@property(nonatomic,strong)WKWebView*wkWebView;@property(nonatomic,strong)UIProgressView*progressView;2.初始化progressView-(void)viewDidLoad{[supe  查看详情  

                

学习|css3实现进度条加载


进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script...  查看详情  

                

用js写一个网页进度条


一、基本思路为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定...  查看详情  

                

css3彩色进度条加载动画带进度百分比


在线演示       本地下载  查看详情  

                

动画进度条以显示网页的进度


】动画进度条以显示网页的进度【英文标题】：animatingprogressbartoshowtheprogressofwebpage【发布时间】：2013-08-1202:20:56【问题描述】：我的页面顶部有一个进度条，我希望该条显示网页加载的进度。当整个页面加载时，我希望栏显示10...  查看详情  

                

css3loading进度条加载动画特效


在线演示本地下载  查看详情  

                

android中webview怎么实现网页加载时显示加载进度


...A可以在第一次加载进度达到百分之百时重新加载里一个网页，使用标识可以判断第一次加载，WebView中方法获取加载进度。。。本回答被提问者采纳  查看详情  

                

unity_加载页面及进度条(代码片段)


...加载（加载界面的实现）新建一个加载页面场景创建一个滑动条用来表示进度条 再创建一个文本用来显示进度百分比 位置随便摆一下创建一个空对象在空对象上新建挂载脚本 修改代码：  查看详情  

                

bootstrap进度条组件详解(代码片段)


...ap.min.css、jquery.min.js、bootstrap.min.js等，这个就不多说了在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本...  查看详情  

                

网站加载进度条。


https://preloaders.net/    判断状态进行操作隐藏页面加载gifhttps://loading.io/ autoprefixer.github.io自动形成兼容写法css的网站。。。。=================================================   http  查看详情  

                

android中webview怎么实现网页加载时显示加载进度？


android中只需要给webView注册一个事件即可实现加载进度。以下是具体实现代码：1.从webView中获取设置	WebSettingssws=webView.getSettings();		sws.setSupportZoom(true);		sws.setBuiltInZoomControls(true);		webView.setInitialScale(25);		webView.getSettings().setUseWideViewP...  查看详情  

                

纯css+html制作网页加载动画


我们都知道网页的加载需要一定的时间, 即使我们在努力优化代码执行效率以及压缩文件, 但是还是需要时间啊, 在这段时间内如果表面上不发生任何事情, 用户就会有比较糟糕的体验, 但是如果有一个动画或者...  查看详情  

                

css系列获取实时数据做进度


<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>实时数据进度条</title><styletype="text/css">*{padding:0;margin:0;}.loading{width:100%;height:100%;posi  查看详情