一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要loading来掩盖这个漫长的过程！

emmm，定时器？写个定时器还要清除，万一造成内存泄露？定时器之间还会互相影响，呼呼呼那就不考虑了

那么就用css写一个~~

语法：

animation: name duration timing-function delay iteration-count direction;

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

1、设置进度条起始宽度0%，3s之内宽度移动85%，为什么不设置100%呢？ 因为3s进度条就加载到100%，如果我们的页面却迟迟没有加载完成，那么完全影响用户体验，所以我们设置到85%就让进度条停了下来，然后页面加载完成之后隐藏进度条，实现以假乱真！

  /* loading */

      .loading {

        background: #000;

        position: absolute;

        z-index:;

        width: 100%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

      }

      .progress {

        position: relative;

        width: 200px;

        height: 8px;

        background: #fff;

        border-radius: 20px;

        margin-top: 20px;

      }

      .progress-bar {

        position: absolute;

        left:;

        top:;

        height: 8px;

        line-height: 20px;

        border-radius: 20px;

        background: #d7bb29;

        animation: animate-positive 3s;

      }

      @keyframes animate-positive {

        from {width:0px;}

        to {width:85%;}

      }

      @-webkit-keyframes animate-positive {

        from {width:0px;}

        to {width:85%;}

      }

2.js判断页面是否加载完成，使用一个document 的 Document.readyState 属性描述了文档的加载状态。complete / 完成文档和所有子资源已完成加载。表示 load状态的事件即将被触发

当document.readyState == "complete"，表示页面所有内容已被完全加载此时可以隐藏loading

 var loading = document.getElementById("loading");

      if (document.readyState == "complete") {

        // 页面加载完毕

         loading.style.display = "none";

      }

3.附上demo

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>loading</title>

    <style>

      /* loading */

      .loading {

        background: #000;

        position: absolute;

        z-index: 999;

        width: 100%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

      }

      .progress {

        position: relative;

        width: 200px;

        height: 8px;

        background: #fff;

        border-radius: 20px;

        margin-top: 20px;

      }

      .progress-bar {

        position: absolute;

        left: 0;

        top: 0;

        height: 8px;

        line-height: 20px;

        border-radius: 20px;

        background: #d7bb29;

        animation: animate-positive 3s;

      }

      @keyframes animate-positive {

        from {width:0px;}

        to {width:85%;}

      }

      @-webkit-keyframes animate-positive {

        from {width:0px;}

        to {width:85%;}

      }

    </style>

  </head>

  <body>

    <div id="loading" class="loading">

      <div class="progress">

        <div class="progress-bar">

        </div>

      </div>

    </div>

    <script>

      var loading = document.getElementById("loading");

      if (document.readyState == "complete") {

        // 页面加载完毕

       // loading.style.display = "none";

      }

    </script>

  </body>

</html>

4.效果图如下，可根据自己需求修改样式，已经进度条进度时间，进度曲线等~~

css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失的更多相关文章

  1. 在程序加载过程中显示ProgressDialog 对话框

    private ProgressDialog mProgressDlg = null; @Override protected void onCreate(Bundle savedInstanceSt ...

  2. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

  3. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  4. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  5. ZOJ 3962 Seven Segment Display 16进制的八位数加n。求加的过程中所有的花费。显示[0,F]有相应花费。

    Seven Segment Display Time Limit: Seconds Memory Limit: KB A seven segment display, or seven segment ...

  6. Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

    加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...

  7. jquery加载数据时显示loading加载动画特效

    插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...

  8. DOM加载过程中ready和load的区别

    在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...

  9. js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

    预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...

随机推荐

  1. TCP传输协议中如何解决丢包问题

    TCP在不可靠的网络上实现可靠的传输,必然会有丢包.TCP是一个“流”协议,一个详细的包将会被TCP拆分为好几个包上传,也是将会把小的封裝成大的上传,这就是说TCP粘包和拆包难题. 但是许多人有不同的 ...

  2. 「数据分析」Sqlserver中的窗口函数的精彩应用-问题篇

    最近看到PowerBI圈子在讨论最大连续区间段的问题,即某人最大的全勤时间,某人的最长的连续打卡时间等问题的计算,佐罗老师给出了10万倍性能的答案.这个问题也引发了笔者一些兴趣,隐约记得以前看过Sql ...

  3. Excel催化剂开源第15波-VSTO开发之DataTable数据导出至单元格区域

    上篇提到如何从Excel界面上拿到用户的数据,另外反方向的怎样输出给用户数据,也是关键之处. VSTO最大的优势是,这双向的过程中,全程有用户的交互操作. 而一般IT型的程序,都是脱离用户的操作,只能 ...

  4. 2017day1

    http://www.cnblogs.com/alex3714/articles/5465198.html 四.Python安装 windows 1 2 3 4 5 6 7 1.下载安装包     h ...

  5. vue教程(四)--其他实用用法补充

    一.vue生命周期简单介绍 var App={ template:'', data(){ }, beforeCreated:function(){ //不能操作数据,只是初始化了事件等.. }, cr ...

  6. 初学者的linux - 基本知识篇

    1.Linux系统结构 Linux是一套免费使用和自由传播的类Unix操作系统,它是一种倒树结构. “/”就是系统的顶级目录,称作根目录,“/bin,/root,/home,/etc.."这 ...

  7. 装饰器和"开放-封闭"原则

    装饰器和"开放-封闭"原则 "开放-封闭"原则 软件开发中的"开放-封闭"原则,它规定已经实现的功能代码不应该被修改,但可以被扩展,即: 封 ...

  8. golang在多个go routine中进行map或者slice操作应该注意的对象。

    因为golang的map和列表切片都是引用类型,且非线程安全的,所以在多个go routine中进行读写操作的时候,会产生“map read and map write“的panic错误. 某一些类型 ...

  9. 剖析std::function接口与实现

    目录 前言 一.std::function的原理与接口 1.1 std::function是函数包装器 1.2 C++注重运行时效率 1.3 用函数指针实现多态 1.4 std::function的接 ...

  10. 如何使用JSP访问MySQL数据库

    <%@page import="java.sql.*" import ="java.util.*" import ="java.io.*&quo ...