实现页面顶部加载的线性进度条

 

  没有真实数据模拟，也没用过，只是对其原理感兴趣，自己也做了一个。

1.纯css实现

  

<style>
       #loading{
         height: 4px;
         position: fixed;
         top: 0;
         z-index: 9999;
         background:#6bc30d;
         box-shadow:#6bc30d 1px 0 6px 1px;
         animation:pulse 1s ease-out; 
       }

       @-webkit-keyframes pulse { 
          30% {  
              width: 10%;  /* 盒子宽度为10% */
              opacity:.6 
          } 
          60% { 
              width: 40%; /* 盒子宽度为40% */
              opacity:0.6; 
          } 
          100% { 
              width: 100%; /* 盒子宽度为100% */
              opacity:0.6 
          } 
    } 
    </style>
</head>
<body >
<div id="loading">
</div>

 注：这种实现方式有问题，第一：模拟的页面加载只是做了一个动画，盒子宽度的加载，依赖于动画执行的时间（逻辑错误，应该是页面加载到一定位置，执行动画），当设置

animation 时间为0 ，看不到任何效果；第二：页面的左上角会残留阴影。测试（chrome）

2.jQuery 实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
       #loading{
         height: 4px;
         position: fixed;
         top: 0;
         z-index: 9999;
         background:#6bc30d;
         box-shadow:#6bc30d 1px 0 6px 1px;
       }
    </style>
</head>
<body >
<div id="loading">
</div>
</body>
<script>

   $("#loading").animate({'width':'20%'},20) //链式执行动画队列
   .animate({'width':'40%'},20)
   .animate({'width':'60%'},20)
   .animate({'width':'80%'},20)
   .animate({'width':'100%'},20);
  $(function(){                        //页面完以后，隐藏进度条
    $("#loading").fadeOut();
  })
  
</script>
</html>

 

posted @ 2017-08-01 15:38  风起了--  阅读(1275)  评论(0)  编辑  收藏  举报