在页面加载的时候，我们可以使用 document.onreadystatechange 方法来监听页面的加载情况，可以在页面加载的时候作出相应的提示或者加载效果。我在这里就使用了CSS3的animation属性配合js做了一个线条动画，顺便写个文章记录一下！

CSS部分：

.loading_bar{
  position:fixed;
  top:0;left:0;
  z-index:5000;
  display: block;
  width:100%;
  height:3px;
  background:#6c9;
  -webkit-animation: loading .8s .2s ease-in-out infinite;
  animation: loading .8s .2s ease-in-out infinite;
}
@-webkit-keyframes loading{
  0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%)
  }
  100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%)
  }
}
@keyframes loading{
  0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%)
  }
  100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%)
  }
}

HTML部分:

<div class="loading_bar"></div>

JS部分:

<script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function hideLoadingBar(){
      $(".loading_bar").hide();
    }
    //当页面加载状态改变的时候执行这个方法
    document.onreadystatechange = readyChange;
    function readyChange()
    {
      //当页面加载状态 complete 加载完成
      if(document.readyState == "complete"){
        hideLoadingBar();
      }
    }
  });
</script>

完毕。喜欢的可以去试试