一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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. Centos7 安装jdk，MySQL

    报名立减200元.暑假直降6888. 邀请链接:http://www.jnshu.com/login/1/20535344 邀请码:20535344 学习阿里云平台的云服务器配置Java开发环境.我现 ...

  2. 【Android UI】侧滑栏的使用（HorizontalScrollView控件的使用）

    主要的用到的控件:HorizontalScrollView 主要的功能:把几张图片解析成一张图片,在一个容器中呈现. 布局文件xml side_bar_scollview.xml//显示view的容器 ...

  3. Excel催化剂开源第51波-Excel催化剂遍历单元格操作性能保障

    在Excel催化剂推出的这一年多时间里,经常性听到一种声音,大概意思是真正会写代码的人,都不会看上Excel催化剂写出来的功能,自己造一个更舒服贴心,仿佛会一点VBA就可以天下无敌一般,也好像Exce ...

  4. 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...

  5. 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数

    之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...

  6. e校帮V1.1使用指南

    2017年04月17日,e校帮正式版本V1.1.4正式上线了.大家可以在e校帮官网进行下载,http://exiaobang.top 或者在搜狗手机助手/搜狗输入法/酷安进行下载. e校帮简介: e校 ...

  7. [leetcode]python 448. Find All Numbers Disappeared in an Array

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  8. Java中常见的异常类型

    一. Java中常见的异常类 异常类 说明 ClassCastException 类型准换异常 ClassNotFoundException 未找到相应类异常 ArithmeticException ...

  9. 初识web

    人得往前走啊 所以学学web 动态网页是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容.可以让用户和服务器交互的网站.然而动态网站并不是指具有动画功能的 ...

  10. 华为路由交换综合实验 ---IA阶段

    目录 华为路由交换综合实验 ---IA阶段 实验拓扑 实验需求 华为路由交换综合实验 ---IA阶段 实验拓扑 实验需求 根据拓扑合理规划IP地址以及VLANIf地址(PC1属于运营部,PC2属于市场 ...