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

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

 

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.效果图如下，可根据自己需求修改样式，已经进度条进度时间，进度曲线等~~

                                                                                                                                                                                                                                                                                                                                                                                                                     

posted @ 2019-08-15 16:06  _skylar  阅读(2359)  评论(1)  编辑  收藏  举报