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

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

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>

【css系列】创建网页加载进度条的更多相关文章

用document.readyState实现网页加载进度条
概述之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...
HTML5 CSS3 诱人的实例：网页加载进度条的实现，下载进度条等
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
iOS WKWebView添加网页加载进度条(转)
一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...
Jquery网页加载进度条（随笔，当然要随便写，当日记动态心情写咯）
首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...
jQuery网页加载进度条插件
jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...
JS网页加载进度条
参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条
混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...
pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

随机推荐

Unity5-----------之GI设置简介
GI global illumination 全局照明indirect illumination 间接照明模拟出光线追踪的效果实现方法:1.ssao系列 2.lightmap.辐射度3.PBRT 实 ...
Python——hashlib
该模块实现了诸多安全哈希和消息摘要算法的通用接口,包括 FIPS 安全哈希算法: SHA1, SHA224, SHA256, SHA384 和 SHA512 算法(在 FIPS 180-2 中定义), ...
（诊断）解决GitHub使用双因子身份认证“Two-Factor Athentication”后无法git push 代码的“fatal: Authentication failed for ...”错误
在GitHub上采取双因子身份认证后,在git push 的时候将会要求填写用户的用户名和密码,用户名就是用户在GitHub上申请的用户名,但是密码不是普通登录GitHub的密码. 一旦采取双因子身份 ...
MyBatis之one2one与one2many
 <resultMap id="customerResultMap" type=" ...
git 出错 bad index file sha1 signature
error: bad index file sha1 signature fatal: index file corrupt 解决方法:使用git命令执行: $ rm -f .git/index $ ...
腾讯QQ家族任意支付QB+修改资料csrf
http://jz.qq.com/m_card.shtml POST /cgi-bin/league_change_userinfo HTTP/1.1 Host: jz.qq.com Connecti ...
SVN自动生成版本号信息
在平时的多版本开发过程中,需要通过版本号来定位到源码版本,便于定位问题.常规工程实践是设置版本号为X.Y.Z.N,一般X表示主版本号,Y表示子版本号,我一般将Z设为0,N为本次提交的SVN版本 ...
安装yeoman报没有权限的错误
新的ubuntu服务器, 不小心先装了npm, 再装的node, 再用meanjs装的yeoman(即不是自己npm install -g yo装的, 是用meanjs的stack一步到位的),而正常 ...
EF6 Code First & Auto Migration on Appharbor
之前不小心看到EF的code first在appharbor上进行migration的时候比较麻烦,今天碰巧也要更新数据库了,顺便试试. modify model public class SiteI ...
【转】ZooKeeper学习第二期--Zookeeper命令操作
一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他们大多数是查询命令,用来获取Zookeeper服务的当前状态及相关信息.用户在客户端可以通过telnet或n ...

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

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

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

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

二、在第一版中做改良

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

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

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

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

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

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

【css系列】创建网页加载进度条的更多相关文章

随机推荐

热门专题