一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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++ 二分答案 问题 使得x^x达到或超过n位数字的最小正整数x是多少?n<=2000000000 分析 对与这种较难求解的问题,我们很难想出较好的解决策略.但是,我们至少知道答案一定在1与2 ...

  2. 基于SpringBoot的Web API快速开发基础框架

    其实还是很因为懒,才会有这个案例项目的产生,每次开启一个终端的小服务都要整理一次框架,造成重复的.不必要的.缺乏创造性的劳动,SO,本着可以用.用着简单的原则上传代码到Github,希望有需要的朋友直 ...

  3. 使用kubectl管理k8s集群（二十九）

    前言 在搭建k8s集群之前,我们需要先了解下kubectl的使用,以便在集群部署出现问题时进行检查和处理.命令和语法记不住没有关系,但是请记住主要的语法和命令以及帮助命令的使用. 在下一篇,我们将讲述 ...

  4. Bzoj1972: [Sdoi2010]猪国杀 题解（大模拟+耐心+细心）

    猪国杀 - 可读版本 https://mubu.com/doc/2707815814591da4 题目可真长,读题都要一个小时. 这道题很多人都说不可做,耗时间,代码量大,于是,本着不做死就不会死的精 ...

  5. Bzoj 2058: [Usaco2010 Nov]Cow Photographs 题解

    2058: [Usaco2010 Nov]Cow Photographs Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 190  Solved: 104[ ...

  6. Java文本类型输入与输出

    import java.io.*; import java.time.LocalDate; import java.util.Scanner; public class Test { public s ...

  7. [USACO09OCT]Invasion of the Milkweed】乳草的侵占-C++

    Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物大战人类中败下阵来.邪恶的乳草已经在他的农场的西北部份占领了一片立足之地. 草地像往常一样,被分割成一个高 ...

  8. 宽度总结-scrollWidth，clientWidth，offectWidth

    平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些. 1.scrollW ...

  9. Kafka配置信息

    Kafka配置信息 broker配置信息 属性 默认值 描述 broker.id 必填参数,broker的唯一标识 log.dirs /tmp/kafka-logs Kafka数据存放的目录.可以指定 ...

  10. NameNode和SecondaryNameNode的工作机制

    NameNode&Secondary NameNode 工作机制 NameNode: 1.启动时,加载编辑日志和镜像文件到内存 2.当客户端对元数据进行增删改,请求NameNode 3.Nam ...