一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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. C++学习书籍推荐《C++编程思想第二版第一卷》下载

    百度云及其他网盘下载地址:点我 编辑推荐 “经典原版书库”是响应教育部提出的使用原版国外教材的号召,为国内高校的计算机教学度身订造的.<C++编程思想>(英文版第2版)是书库中的一本,在广 ...

  2. Python线程池ThreadPoolExecutor源码分析

    在学习concurrent库时遇到了一些问题,后来搞清楚了,这里记录一下 先看个例子: import time from concurrent.futures import ThreadPoolExe ...

  3. ueditor 常用配置

    scaleEnabled:是否可以拉伸长高,默认true(当开启时,自动长高失效) autoHeightEnabled:是否自动长高,默认true catchRemoteImageEnable:设置远 ...

  4. .Net Core 学习新建Core MVC 项目

    一.新建空的Core web项目 二.在Startup文件中添加如下配置 1.  在ConfigureServices 方法中添加 services.AddMvc();MVC服务 2. app.Use ...

  5. python之pip install

    安装方式1 wget  http://python-distribute.org/distribute_setup.py sudo python distribute_setup.py wget  h ...

  6. SpringBoot2.x 整合Spring-Session实现Session共享

    SpringBoot2.x 整合Spring-Session实现Session共享 1.前言 发展至今,已经很少还存在单服务的应用架构,不说都使用分布式架构部署, 至少也是多点高可用服务.在多个服务器 ...

  7. P4071 [SDOI2016]排列计数 题解

    分析: 线性求逆元:https://blog.csdn.net/qq_34564984/article/details/52292502 代码: #include<cstdio> usin ...

  8. 成为高级 React 开发你需要知道的知识点

    简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点. 使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只 ...

  9. C#编程.循环的中断

    1 循环的中断 break-立即终止循环(继续执行循环后面的第一行代码) continue-立即终止当前的循环(继续执行下一次循环) goto-可以跳出循环,到已标记好的位置上(如果希望代码易于阅读和 ...

  10. 记一次使用LR测试UDP和TCP的过程

    背景 最近项目要做性能测试,要出要一份性能报告,让我出一个有关Tcp和Udp的功能模块的测试,流程大概是这样,先走TCP协议协商一下会话,协商成功后走Udp收发数据. 有点简单啊,自己写个功能模块测一 ...