一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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. 2050编程赛 冰水挑战 HDU 6495

    题目地址:https://vjudge.net/problem/HDU-6495 思路:我们需要维护的是挑战了n个之后剩余体力值,剩余体力值越大越好dp[N(i)][N(j)],第一个维度,记录当前是 ...

  2. Flutter学习笔记（6）--Dart异常处理

    如需转载,请注明出处:Flutter学习笔记(6)--Dart异常处理 异常是表示发生了意外的错误,如果没有捕获异常,引发异常的隔离程序将被挂起,并且程序将被终止: Dart代码可以抛出并捕获异常,但 ...

  3. JS获取display为none的隐藏元素的宽度和高度的解决方案

    有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...

  4. ZIP：GZIP

    GZIPInputStream: GZIPInputStream(InputStream in) :使用默认缓冲区大小创建新的输入流. GZIPInputStream(InputStream in, ...

  5. ASP.NET CORE 入门教程（附源码）

    ASP.NET CORE 入门教程 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 ...

  6. Web API POST [FromBody] string value 接受参数

    网上看到很多关于这这个问题的解决方案,但是都不正确,我也恰巧遇到这个问题,所有把正确的解决方案写出来,希望给后来人参考,如有不同意见欢迎指正 namespace WebApi.Controllers ...

  7. ItemsControl绑定的数据模板显示不同样式：模板选择器

    总所周知,wpf提供了数据模板,列表控件可以绑定数据实现批量显示同类型数据.不过同个数据模板显示不同的样式怎么办?这时我们可以用模板选择器. 首先我们可以将数据绑定到首先定义资源样式 <Data ...

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

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

  9. Excel催化剂开源第3波-修复ExcelCom加载项失效问题及WPS可调用Com加载项的方法

    为了还原一个干净无侵扰的网络世界,本文将不进行大规模地分发,若您觉得此文有用,不妨小范围地分享到真正有需要的人手中 功能概述 修复ExcelCom加载项常见问题,如每次需重新勾选COM加载项或COM加 ...

  10. [leetcode] 103 Binary Tree Zigzag Level Order Traversal (Medium)

    原题链接 题目要求以"Z"字型遍历二叉树,并存储在二维数组里. 利用BFS,对每一层进行遍历.对于每一层是从左还是从右,用一个整数型判断当前是偶数行还是奇数行就可以了. class ...